/* 制作用WordpressテーマCSSです。 フォーマットはBONESを元に、よく使うものを盛り込んでいます。 元から入っていたBONESのCSSは制作でいらない、使ってないものはごっそり消してます。 ■normalize.min.cssについて http://www.initializr.com/ から生成したものを元に改良して読み込んでいます。 改良する時ははnormalize.cssを変更して圧縮したものを読み込むか、 下の@importでnormalize.cssを読み込むようにしてください。 ■addstyle.cssについて 共同開発用のサブCSSファイルです。 同時にCSSを触るとき、ファイルを上書きしない為のものです。 ※今回は使用してません。 ーーーCSSのレスポンシブ設定ーーー スマホ表示のみ対応 iphone 6pulsの横を基準に736pxでブレイクポイントを設置してます。 基本iphoneの縦向きに合わせて組んでます。 ipad以上はJSでviewvort切り替えて横1300pxでPCを表示するように設定してます。 by maru */ @charset "UTF-8"; @import url("normalize.css"); /* ========================================================================== font-famiry CSS ※2017年ベスト盤font-family指定 by Maru ========================================================================== */ @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; } @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200; } @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300; } @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400; } @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); font-weight: bold; } @font-face { font-family: "Helvetica Neue"; src: local("Helvetica Neue Regular"); font-weight: 100; } @font-face { font-family: "Helvetica Neue"; src: local("Helvetica Neue Regular"); font-weight: 200; } body { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif; } /* IE10以上 */ @media all and (-ms-high-contrast: none) { body { font-family: Verdana, Meiryo, sans-serif; } } /* ========================================================================== over resetCSS ※サイト制作に合わせてリセットCSSを上書きするセクション by Maru ========================================================================== */ html { color: #222; font-size: 14px; line-height: 1; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } body{ overflow-x: hidden; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } audio, canvas, iframe, img, svg, video { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } h1,h2,h3,h4,h5,h6,h7{margin: 0 0 1rem 0;} /* 見出しの下マージンが邪魔な場合はここを0にしてから組んで下さい。 */ p{margin:0;} @media only screen and (max-width: 736px) { h1,h2,h3,h4,h5,h6,h7{margin: 0 0 0.5rem 0;} } /* link */ a, a:link, a:hover, a:visited, a:active{color: #333;} a:link{opacity: 1; text-decoration: none; transition: all .3s cubic-bezier(.55,0,.1,1);} a:hover{opacity: 0.7;} /* ========================================================================== 共通CSS by Maru ========================================================================== */ .m10{margin-bottom: 10px;} .m20{margin-bottom: 20px;} .m30{margin-bottom: 30px;} .m40{margin-bottom: 40px;} .m50{margin-bottom: 50px;} .m60{margin-bottom: 60px;} .m70{margin-bottom: 70px;} .m80{margin-bottom: 80px;} .m90{margin-bottom: 90px;} img{max-width: 100%;} #logo, #main-visual figure, #movie-profile, #youtube, #director {text-align: center;} /* リキッドレイアウト用のサイズ指定ラッパークラス */ .common-wrap{ max-width: 1100px; margin: 0 auto; display: block; } /* clearfix */ .clear::after{ content: ""; clear: both; display: block; } /* 矢印付きリンクボタン */ .arrowlink-box{ display: block; max-width: 230px; border: 1px solid #777; padding: 10px 0; color: #777; text-align: center; position: relative; margin: 0 auto; } .arrowlink-box::after{ content: "\002192"; /* → の文字*/ margin-left: 20px; position: absolute; top: 0; bottom: 0; right: 20px; width: 14px; height: 14px; margin: auto; } .arrowlink-box.ar-white{border-color: #fff; color: #fff;} @media only screen and (max-width: 736px) { .common-wrap{ max-width: 100%; } } /* ========================================================================== helper CSS ※あると便利なCSS特集 by Maru ========================================================================== */ /* hidden PC,SP表示非表示 */ .sp-only,.sp-only img{display: none !important;} /* youtube responsive */ #youtube{ width: 80%; margin: 0 auto 2rem; } .youtube-resp { position: relative; height: 0; padding: 30px 0 47.97%; /*16:9比率 */ overflow: hidden; } .youtube-resp iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } @media only screen and (max-width: 736px) { img{margin:0 auto;display: block;} .pc-only,.pc-only img{display: none !important;} .sp-only,.sp-only img{display: block !important;} } /* ========================================================================== text装飾 CSS ========================================================================== */ .t-justify{text-align: justify;} .fontbig{font-size: 2rem; font-weight: bold;} .fontmidi{font-size: 1.4em; font-weight: bold;} .fontsmall{font-size: 12px;} /*SPで読める最小サイズ*/ .normal{font-weight: normal; font-size: 1em;} .bold{font-weight: bold;} .red{color: #e60012;} .blue{color: #0445d8;} .t_right{text-align: right;} .t_center{text-align: center;} .mincyo{font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;} /* ========================================================================== その他装飾 CSS ========================================================================== */ .blue_box{display:inline-block;color:#fff;background-color: #0445d8;padding:3px 10px;} .red_box{display:inline;color:#fff;background-color: #e60012;padding:3px 10px;} .border_dashed_top{border-top: 1px dashed #888;padding-top: 15px;} .border_solid_top{border-top: 1px solid #888;padding-top: 15px;} .border_dashed_bottom{border-bottom: 1px dashed #888;padding-bottom: 15px;} .border_solid_bottom{border-bottom: 1px solid #888;padding-bottom: 15px;} .stnd_table{border-right:1px solid #555;border-bottom:1px solid #555;} .stnd_table th,.stnd_table td{border-left:1px solid #555; border-top:1px solid #555; padding: 5px 8px; text-align: center; } .stnd_table th{background-color: #e1e1e1;} /* ========================================================================== layout CSS ========================================================================== */ /* common culm */ .col{ width: 100%; } .col::after{ content: ""; clear: both; display: block; } .col2{ display: block; float: left; width: 50%; vertical-align: top; } .col2:nth-of-type(1){border-right: 1rem solid transparent;} .col2:nth-of-type(2){border-left: 1rem solid transparent;} .col3 > li, .col4 > li{ display: block; width: 25%; float: left; padding: 0 10px; } .col3 .col4{margin:0 -10px;} .col3 > li{width: 33.33%;} /* 共通margin */ .m80{margin-bottom: 80px;} .m40{margin-bottom: 40px;} @media only screen and (max-width: 736px) { .col{display: block; margin-bottom: 2rem;} .col2{ display: block; width: 100%; float: none; } .col2:nth-of-type(1){border-right: none;} .col2:nth-of-type(2){border-left: none;} .col3 > li, .col4 > li{ padding: 0; } .col3 > li{width: 100%; float: none;} .col4 > li{width: 50%;} .col4{margin:0;} .m80{margin-bottom: 40px;} .m40{margin-bottom: 20px;} } /* ========================================================================== form parts CSS ※BONESのもの ========================================================================== */ input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], select, textarea, .field { display: block; height: 40px; line-height: 40px; padding: 0 12px; margin-bottom: 14px; font-size: 1em; color: #333; border-radius: 1px; vertical-align: middle; box-shadow: none; border: 0; width: 100%; max-width: 400px; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #eaedf2; -webkit-transition: background-color 0.24s ease-in-out; transition: background-color 0.24s ease-in-out; } #wp_form input[type="text"], #wp_form input[type="password"], #wp_form input[type="datetime"], #wp_form input[type="datetime-local"], #wp_form input[type="date"], #wp_form input[type="month"], #wp_form input[type="time"], #wp_form input[type="week"], #wp_form input[type="number"], #wp_form input[type="email"], #wp_form input[type="url"], #wp_form input[type="search"], #wp_form input[type="tel"], #wp_form input[type="color"], #wp_form select, #wp_form textarea {box-shadow: 1.7px 2.2px 0.4px 1px rgba(76,11,11,0.3) inset;} .box_row input{margin: 3px 3px 13px 0px !important;} input[type="text"]:focus, input[type="text"]:active, input[type="password"]:focus, input[type="password"]:active, input[type="datetime"]:focus, input[type="datetime"]:active, input[type="datetime-local"]:focus, input[type="datetime-local"]:active, input[type="date"]:focus, input[type="date"]:active, input[type="month"]:focus, input[type="month"]:active, input[type="time"]:focus, input[type="time"]:active, input[type="week"]:focus, input[type="week"]:active, input[type="number"]:focus, input[type="number"]:active, input[type="email"]:focus, input[type="email"]:active, input[type="url"]:focus, input[type="url"]:active, input[type="search"]:focus, input[type="search"]:active, input[type="tel"]:focus, input[type="tel"]:active, input[type="color"]:focus, input[type="color"]:active, select:focus, select:active, textarea:focus, textarea:active, .field:focus, .field:active { color:#000; background-color: #f7f8fa; } input[type="text"].error, input[type="text"].is-invalid, input[type="password"].error, input[type="password"].is-invalid, input[type="datetime"].error, input[type="datetime"].is-invalid, input[type="datetime-local"].error, input[type="datetime-local"].is-invalid, input[type="date"].error, input[type="date"].is-invalid, input[type="month"].error, input[type="month"].is-invalid, input[type="time"].error, input[type="time"].is-invalid, input[type="week"].error, input[type="week"].is-invalid, input[type="number"].error, input[type="number"].is-invalid, input[type="email"].error, input[type="email"].is-invalid, input[type="url"].error, input[type="url"].is-invalid, input[type="search"].error, input[type="search"].is-invalid, input[type="tel"].error, input[type="tel"].is-invalid, input[type="color"].error, input[type="color"].is-invalid, select.error, select.is-invalid, textarea.error, textarea.is-invalid, .field.error, .field.is-invalid { color: #fbe3e4; border-color: #fbe3e4; background-color: white; background-position: 99% center; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2NDM0NDREQkYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2NDM0NDREQ0YwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ3ODRGRkE2RjA0QTExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0MzQ0NERBRjA0QjExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+U8iT5wAAAedJREFUeNqk1U9I02Ecx/HtV3aIFAc1hcRDUoGXRAq0oNLA2CrsEFmHbikZu0iQYIFGYAiegkCpLipBxPpDEBMUzB0EhSG2LhG7hMR2GviPgUTvB57Bw8P3+U23B16HPX8+e/b8nt93wezZSMCnhXETF3AcB5BDCnH8Dq98ExcGHcFn8Ah3cdDni+fxnPDv9oAnTB7CKu6VCFXtChZy56LxUjt+jfuB8toSOth9wd7xWAWhqrUjYR/FRTwWJm+iIPT/w7bQf5ljiZnBg45dtKFX6H+LU8gIY8OEV6vgTkStwXWE8BPTGDHGPqNPz2mCfSOOYkA99TvCt1bhGPL68zMcwmncMuape10jrI+q4BbHi/FLn31S9z2x5tRhTc+1W506ipM+T3oRD4X+8+qtc4SqFvL0z/Fr14S+Szjis8bz9Lvvaq8cwS/wwGfdlqfPSWqTiFlX77o13u9Ym1PBs8JAytpRoy44X9Ft9E/gvbA+rYKn8NcaaMVc8UHgBw4b9/iqUQZ6hOAJFbyDcUflmsEX4a6+wTtHGfhAIUqa1U29Zc2BytouThD8x6xuN5CtMPi2CrXLZkZf/HyZoRFCP7n+QVR4PV7uI/AjGghN7OU/r1ilnqILtfpNC+o6vIFljBKYlhb/F2AAgaBsWR5wRiIAAAAASUVORK5CYII=); outline-color: #fbe3e4; } input[type="text"].success, input[type="text"].is-valid, input[type="password"].success, input[type="password"].is-valid, input[type="datetime"].success, input[type="datetime"].is-valid, input[type="datetime-local"].success, input[type="datetime-local"].is-valid, input[type="date"].success, input[type="date"].is-valid, input[type="month"].success, input[type="month"].is-valid, input[type="time"].success, input[type="time"].is-valid, input[type="week"].success, input[type="week"].is-valid, input[type="number"].success, input[type="number"].is-valid, input[type="email"].success, input[type="email"].is-valid, input[type="url"].success, input[type="url"].is-valid, input[type="search"].success, input[type="search"].is-valid, input[type="tel"].success, input[type="tel"].is-valid, input[type="color"].success, input[type="color"].is-valid, select.success, select.is-valid, textarea.success, textarea.is-valid, .field.success, .field.is-valid { color: #e6efc2; border-color: #e6efc2; background-color: white; background-position: 99% center; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2NDM0NDRERkYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2NDM0NDRFMEYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjY0MzQ0NERERjA0QjExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0MzQ0NERFRjA0QjExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7olkTQAAAfhJREFUeNqklU9oE0EUhzdroWjw0tBeWlDxkEaIp55TsCU9VKIgCrHBelA8CQ1Kr1WPbZrQ3gqtQqvGqxpQc2jBk6BIIaAGD4qNCKURpDSKiPi98gLDsJt//uBjsztvfnk7895sIPAw6/joGMThFJyAXn2+A+9gA57/TaY/eU0OeBgfhGm4DiGnsb7DAszxBz/NAdcKjMJLuNWCqagHbsscN5+L+hmH4QkMOe1L5jzFfNA2PgT34ajTuY7AGuZB0/hmh5m+gS0r8xv1zRvg+gGCHZiOwnF4DP3iB3sQkYxPd2C6CWfhB9Xwlus5+K1j4jXuaq3a+gM1H9OPcAa+7q9lPidZJqHbiIm7Wg22rsEI7FrPSzAMX/T+ADyAKSsu7Fr1KplehLvwCs5DvfBf65p+MypqRbO1FXK9utH4/QKuaqYTsG3E3INJv00Q46px3+XxanJ/Ute2/vqP4FKDza2KcdljIKdnhS0xXYULTaqmLMZFn8FFSFtvt6x70ExFCS5oUXspq2ssa7oEl1swFa+CGFdgtkHgPDyDKy02zyxNU6lXRUZb1EuHYayNNs+Yh5B0WQo+/8fpJnNTZFuzz2OpjoQ2QruSOQlMy35fEGmEGMxY9e1brxobw7TkWA1h6xfckUPb+JhGoE/Hpfvew7qUld/H9J8AAwDpw3WYrxcZ3QAAAABJRU5ErkJggg==); outline-color: #e6efc2; } input[type="text"][disabled], input[type="text"].is-disabled, input[type="password"][disabled], input[type="password"].is-disabled, input[type="datetime"][disabled], input[type="datetime"].is-disabled, input[type="datetime-local"][disabled], input[type="datetime-local"].is-disabled, input[type="date"][disabled], input[type="date"].is-disabled, input[type="month"][disabled], input[type="month"].is-disabled, input[type="time"][disabled], input[type="time"].is-disabled, input[type="week"][disabled], input[type="week"].is-disabled, input[type="number"][disabled], input[type="number"].is-disabled, input[type="email"][disabled], input[type="email"].is-disabled, input[type="url"][disabled], input[type="url"].is-disabled, input[type="search"][disabled], input[type="search"].is-disabled, input[type="tel"][disabled], input[type="tel"].is-disabled, input[type="color"][disabled], input[type="color"].is-disabled, select[disabled], select.is-disabled, textarea[disabled], textarea.is-disabled, .field[disabled], .field.is-disabled { cursor: not-allowed; border-color: #cfcfcf; opacity: 0.6; } input[type="text"][disabled]:focus, input[type="text"][disabled]:active, input[type="text"].is-disabled:focus, input[type="text"].is-disabled:active, input[type="password"][disabled]:focus, input[type="password"][disabled]:active, input[type="password"].is-disabled:focus, input[type="password"].is-disabled:active, input[type="datetime"][disabled]:focus, input[type="datetime"][disabled]:active, input[type="datetime"].is-disabled:focus, input[type="datetime"].is-disabled:active, input[type="datetime-local"][disabled]:focus, input[type="datetime-local"][disabled]:active, input[type="datetime-local"].is-disabled:focus, input[type="datetime-local"].is-disabled:active, input[type="date"][disabled]:focus, input[type="date"][disabled]:active, input[type="date"].is-disabled:focus, input[type="date"].is-disabled:active, input[type="month"][disabled]:focus, input[type="month"][disabled]:active, input[type="month"].is-disabled:focus, input[type="month"].is-disabled:active, input[type="time"][disabled]:focus, input[type="time"][disabled]:active, input[type="time"].is-disabled:focus, input[type="time"].is-disabled:active, input[type="week"][disabled]:focus, input[type="week"][disabled]:active, input[type="week"].is-disabled:focus, input[type="week"].is-disabled:active, input[type="number"][disabled]:focus, input[type="number"][disabled]:active, input[type="number"].is-disabled:focus, input[type="number"].is-disabled:active, input[type="email"][disabled]:focus, input[type="email"][disabled]:active, input[type="email"].is-disabled:focus, input[type="email"].is-disabled:active, input[type="url"][disabled]:focus, input[type="url"][disabled]:active, input[type="url"].is-disabled:focus, input[type="url"].is-disabled:active, input[type="search"][disabled]:focus, input[type="search"][disabled]:active, input[type="search"].is-disabled:focus, input[type="search"].is-disabled:active, input[type="tel"][disabled]:focus, input[type="tel"][disabled]:active, input[type="tel"].is-disabled:focus, input[type="tel"].is-disabled:active, input[type="color"][disabled]:focus, input[type="color"][disabled]:active, input[type="color"].is-disabled:focus, input[type="color"].is-disabled:active, select[disabled]:focus, select[disabled]:active, select.is-disabled:focus, select.is-disabled:active, textarea[disabled]:focus, textarea[disabled]:active, textarea.is-disabled:focus, textarea.is-disabled:active, .field[disabled]:focus, .field[disabled]:active, .field.is-disabled:focus, .field.is-disabled:active { background-color: #d5edf8; } input[type="password"] { letter-spacing: 0.3em; } textarea { max-width: 100%; min-height: 120px; line-height: 1.5em; } /* フォーム調整 */ input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="color"], select, textarea, .field {max-width: 100%;} form span.req{color: red; margin-left: 1em;} form button, html form input[type="button"], input[type="reset"], input[type="submit"] {border:none; background: #00439a; color: #fff; padding: 10px 20px; border-radius: 5px; font-size: 20px; margin: 0 16px;} input[type="submit"].back{background: #014099;} form h4{margin-bottom: 0;} form p{margin-bottom: 16px;} /*detapicker */ .ui-datepicker .ui-datepicker-title select{ display: inline-block; height: auto; line-height: 1; font-weight: normal; font-size: 14px !important; margin: 0 0 2px 0!important; } /* 資料請求・お問い合わせ--------------------------------------- */ /* 面談での希望日時 */ #mw_wp_form_mw-wp-form-770 .form03_inteview{padding-top: 20px;} #mw_wp_form_mw-wp-form-770 .form03_inteview h3{font-weight: bold;} @media only screen and (max-width: 736px) { form .table-form01 td{display: block; margin-bottom: 0;} form .table-form01 td .mwform-zip-field{display: block;} form .table-form01 td .mwform-checkbox-field.horizontal-item{display: block; margin: 0 0 5px 0;} /* 隙間調整 */ #mw_wp_form_mw-wp-form-6749 .course_value br{display: none;} } /******************************* フォームの調整 2025.02.04 甲斐 *******************************/ .course_value .horizontal-item { display: block; } .left .horizontal-item { display: block; } .mw_wp_form .left .horizontal-item + .horizontal-item { margin-left: 0; } /* ========================================================================== toppage CSS by Maru ========================================================================== */ /************************* H1, H2, H3, H4, H5 STYLES *************************/ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { text-rendering: optimizelegibility; font-weight: 500; /* if you're going to use webfonts, be sure to check your weights http://css-tricks.com/watch-your-font-weight/ */ /* removing text decoration from all headline links */ } h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a { text-decoration: none; } h1, .h1 { font-size: 2.5em; line-height: 1.333em; } h2, .h2 { font-size: 1.75em; line-height: 1.4em; margin-bottom: 0.375em; } h3, .h3 { font-size: 1.125em; } h4, .h4 { font-size: 1.1em; font-weight: 700; } h5, .h5 { font-size: 0.846em; line-height: 2.09em; text-transform: uppercase; letter-spacing: 2px; } /********************* HEADER STYLES *********************/ /* header */ .header-wrap{ max-width: 1300px; margin: 0 auto; } /*>>> 2020.09.11 グローバルメニューの固定化 by k.miyazaki >>>*/ /*.header-wrap .inner-header{display: table; width: 100%;}*/ .header-wrap .inner-header{ display: table; width: 100%; position: fixed; top: 0; max-width: 1300px; background-color: #fff; z-index: 1000; } @media only screen and (max-width: 1070px) { .header-wrap{ max-width: 830px; } .header-wrap .inner-header{ max-width: 830px; } } /*<<< 2020.09.11 グローバルメニューの固定化 by k.miyazaki <<<*/ .logo, nav.global-nav{display: table-cell; vertical-align: middle;} /* .logo{width: auto; float: left;} nav{ max-width: 1000px; float: right;} */ .logo {width: 245px;} .logo a{display: block; padding: 10px 0 0 25px;} @media only screen and (max-width: 736px) { .logo,nav.global-nav{ width: 100%; max-width: 100%; float: none; display: block; text-align: center;} } /********************** metaSlider-nav Override ***********************/ ol.flex-control-nav { bottom: -40px; line-height: 11px; z-index: 999; } .metaslider .flexslider { margin-bottom: 0 !important; } .metaslider > div{margin: 0 0 80px 0;} .flex-viewport {overflow: visible !important;} .theme-default .nivo-controlNav a{background: url('../images/bullets.png') no-repeat !important; } /* ipadはみ出し対策 */ @media only screen and (max-width: 1366px) { .metaslider{overflow: hidden; overflow-x: hidden;} } @media only screen and (max-width: 736px) { .metaslider > div{margin: 0 0 40px 0;} } /********************* NAVIGATION STYLES *********************/ /* modal */ .modal-btn{ position: absolute; top:0; right:0; display: none; width: 56px; height: 56px; background-color: #003060; color: #fff; z-index: 10000; border-style: none; justify-content: center; align-items: end; } .modal-btn:hover { opacity: 1; } .modal-btn span, .modal-btn span:before, .modal-btn span:after { content: ""; position: absolute; display: block; top: 27px; height: 3px; width: 30px; border-radius: 3px; background-color: #fff; transition: all 1s ease; } .modal-btn span:before { top: -11px; transition: all 1s ease; } .modal-btn span:after { top: 11px; transition: all 1s ease; } .modal-btn:has(+ .modal-on) span { background-color: rgba(255, 255, 255, 0); } .modal-btn:has(+ .modal-on) span:before { top: 0; transform: rotate(45deg); transition: all 1s ease; } .modal-btn:has(+ .modal-on) span:after { top: 0; transform: rotate(-45deg); transition: all 1s ease; } .modal-off{ display: table; height: 56px; float: right; } /*>>> 2020.09.11 グローバルメニューの固定化 by k.miyazaki >>>*/ @media only screen and (max-width: 1070px) { .modal-off {height: auto;} } /*<<< 2020.09.11 グローバルメニューの固定化 by k.miyazaki <<<*/ @media only screen and (max-width: 736px) { /* モーダルメニュー用クラス */ .modal-off{ transform: translateX(-100%); transition: transform .3s cubic-bezier(.55,0,.1,1); height: 0; display: block; width: 100%; } .modal-on{transform: translateX(0) !important; height: 100%;} /* .modal-btn{display: block;} */ .modal-btn{display: flex;} } /* global navi */ /*>>> 2020.09.05 Twitterアイコン追加 by k.miyazaki >>>*/ /*>>> 2025.01.23 X(Twitter)アイコン追加 by k.miyazaki >>>*/ /*nav.global-nav li{*/ nav.global-nav > ul > li{ display: table-cell; vertical-align: top; width: 12.5%; text-align: center; } /*nav.global-nav li a{*/ nav.global-nav > ul > li a{ display: block; height: 70px; color: #777; text-align: center; /*line-height: 60px;*/ line-height: 1; padding-top: 30px; } /* nav.global-nav li:nth-last-of-type(4) a, nav.global-nav li:nth-last-of-type(3) a, nav.global-nav li:nth-last-of-type(2) a, nav.global-nav li:nth-last-of-type(1) a{ */ /* nav.global-nav > ul > li:nth-last-of-type(4) a, */ nav.global-nav > ul > li:nth-last-of-type(3) a, nav.global-nav > ul > li:nth-last-of-type(2) a, nav.global-nav > ul > li:nth-last-of-type(1) a{ width: 132px; color: #fff; position: relative; padding: 34px 0 0 0; } /*nav.global-nav li:nth-last-of-type(1) a{*/ /* 2023.12.12 twitter -> X */ /* 2025.01.23 X 削除 */ /* nav.global-nav > ul > li:nth-last-of-type(1) a{ width: 85px; color: #000; position: relative; padding: 10px 0 0 0; overflow: hidden; } */ /* 2025.01.23 個別相談会メニューを大きくして目立たせる */ nav.global-nav > ul > li:nth-last-of-type(2) a{ width: 160px; } /* スマホ表示時以外は「お電話でのご相談」メニューを表示しない */ nav.global-nav > ul > li:nth-last-of-type(1) a{display: none;} nav.global-nav > ul > li:nth-last-of-type(3) a{background-color: #e6002d;} nav.global-nav > ul > li:nth-last-of-type(2) a{background-color: #014099;} nav.global-nav > ul > li:nth-last-of-type(1) a{background-color: #00BFFE;} /* 2023.12.12 twitter -> X */ /* nav.global-nav > ul > li:nth-last-of-type(1) a{background-color: #1da1f2;} */ /* nav.global-nav > ul > li:nth-last-of-type(1) a{background-color: #000;} */ /* nav.global-nav li:nth-last-of-type(4) a::before, nav.global-nav li:nth-last-of-type(3) a::before, nav.global-nav li:nth-last-of-type(2) a::before, nav.global-nav li:nth-last-of-type(1) a::before{ */ /* nav.global-nav > ul > li:nth-last-of-type(4) a::before, */ nav.global-nav > ul > li:nth-last-of-type(3) a::before, nav.global-nav > ul > li:nth-last-of-type(2) a::before, nav.global-nav > ul > li:nth-last-of-type(1) a::before{ display: block; content: ""; position: absolute; top: 15px; left: 0; right: 0; width: 17px; height: 17px; margin: auto; background-size: contain; background-repeat: no-repeat; } /*nav.global-nav li:nth-last-of-type(1) a::before{*/ /* nav.global-nav > ul > li:nth-last-of-type(1) a::before{ top: 0; left: 0; width: 100%; height: 100%; background-size: 60% 60%; background-repeat: no-repeat; background-position: center center; } */ /* nav.global-nav li:nth-last-of-type(4) a::before{background-image: url('../images/icon-mail.png')} nav.global-nav li:nth-last-of-type(3) a::before{background-image: url('../images/icon-ball.png')} nav.global-nav li:nth-last-of-type(2) a::before{background-image: url('../images/icon-tell.png')} nav.global-nav li:nth-last-of-type(1) a::before{background-image: url('../images/icon-twitter.png')} */ nav.global-nav >ul > li:nth-last-of-type(3) a::before{background-image: url('../images/icon-mail.png')} nav.global-nav >ul > li:nth-last-of-type(2) a::before{background-image: url('../images/icon-ball.png')} nav.global-nav >ul > li:nth-last-of-type(1) a::before{background-image: url('../images/icon-tell.png')} /* 2023.12.12 twitter -> X */ /* nav.global-nav >ul > li:nth-last-of-type(1) a::before{background-image: url('../images/icon-twitter.png')} */ /* nav.global-nav >ul > li:nth-last-of-type(1) a::before{background-image: url('../images/icon_x.png')} */ /* 途中のレスポンシブに適用 by miyazaki */ @media only screen and (max-width: 1070px) { .logo { width:160px; } .logo a { padding-top:0; } nav.global-nav { /*font-size: 85%;*/ font-size: 50%; } nav.global-nav > ul > li a { height:50px; /*line-height: 50px;*/ line-height: 1; padding-top: 22px; } nav.global-nav > ul > li:nth-last-of-type(3) a, nav.global-nav > ul > li:nth-last-of-type(2) a { /* nav.global-nav > ul > li:nth-last-of-type(2) a, nav.global-nav > ul > li:nth-last-of-type(1) a {*/ padding: 0; padding-top: 22px; /*width: 115px;*/ width: 90px; } /* nav.global-nav > ul > li:nth-last-of-type(1) a { width: 60px; overflow: hidden; } */ /* 2025.01.23 個別相談会メニューを大きくして目立たせる */ nav.global-nav > ul > li:nth-last-of-type(2) a { width: 110px; } nav.global-nav > ul > li:nth-last-of-type(3) a::before, nav.global-nav > ul > li:nth-last-of-type(2) a::before, nav.global-nav > ul > li:nth-last-of-type(1) a::before { /*nav.global-nav > ul > li:nth-last-of-type(1) a::before {*/ /*background-image: none;*/ background-size: 0% 0%; } } @media only screen and (max-width: 736px) { .logo a{height: 56px; text-align: left; padding:0; line-height: 56px;}/*menuボタンと同じ高さ*/ .logo a img{display: inline-block; margin:0; padding-left: 10px;} nav.global-nav > ul > li {display: block; width: 100%;} nav.global-nav{ position: absolute; top:0; left: 0; z-index: 9999; } nav.global-nav > ul > li{border-bottom: 1px solid #ccc; background-color: white;} /* nav.global-nav > ul > li:nth-last-of-type(4), */ nav.global-nav > ul > li:nth-last-of-type(3), nav.global-nav > ul > li:nth-last-of-type(2), nav.global-nav > ul > li:nth-last-of-type(1){border-bottom: none;} nav.global-nav > ul > li a{ height: auto; line-height: 1.4; padding: 18px 0; /* 2021.03.12 k.miyazaki */ font-size: 200%; } /* nav.global-nav > ul > li:nth-last-of-type(4) a, */ nav.global-nav > ul > li:nth-last-of-type(3) a, nav.global-nav > ul > li:nth-last-of-type(2) a, nav.global-nav > ul > li:nth-last-of-type(1) a{ width: 100%; padding: 18px 0; } /* nav.global-nav > ul > li:nth-last-of-type(1) a{ color: #fff; } */ /*非表示にしていた li:nth-last-of-type(2) をスマホでは表示する*/ nav.global-nav > ul > li:nth-last-of-type(1) a{display: block;} /* nav.global-nav > ul > li:nth-last-of-type(4) a::before, */ nav.global-nav > ul > li:nth-last-of-type(3) a::before, nav.global-nav > ul > li:nth-last-of-type(2) a::before, nav.global-nav > ul > li:nth-last-of-type(1) a::before{ display: inline-block; content: ""; position: static; top: 0; left: 0; right: 0; width: 17px; height: 17px; margin: 0 10px 0 0; vertical-align: middle; background-size: contain; } /*Twitterアイコンと文字列を同時に使用してはいけないことへの措置*/ /* nav.global-nav > ul > li:nth-last-of-type(1) a::before{ background-size: 0% 0%; } */ } /*<<< 2020.09.05 Twitterアイコン追加 by k.miyazaki <<<*/ /*>>> 2022.01.11 グローバルメニューのサブメニュー化 by k.miyazaki >>>*/ .global-nav .sub-menu { position: relative; z-index: 1; display: none; width: 100%; border-top: none; } .global-nav .sub-menu li { display: block; float: none; padding: 0; } @media (min-width: 768px) { nav.global-nav > ul > li { width: 17%; } .global-nav li a:hover { background-color: #014099; color: #fff; } .global-nav li:hover .sub-menu { display: block; } .global-nav .sub-menu { position: absolute; width: 100%; left: 0; border-top: 1px solid #eee; text-align: left; padding: 20px 10px; } .global-nav .sub-menu:before { position: absolute; content: ''; background-color: #014099; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.8; } .global-nav .sub-menu li { position: relative; display: inline-block; width: calc( 100% / 4 - 10px); vertical-align: middle; } .global-nav .sub-menu li a { position: relative; font-size: 1em; font-weight: normal; padding: 10px 10px 10px 20px; text-align: left; color: #333; border-radius: 3px; margin: 10px; display: flex; align-items: center; opacity: 1; background-repeat: no-repeat; background-position: 100% 0; background-size: 200% auto; background-image: linear-gradient( to right, #0054cc 0%, #0054cc 50%, #ffffff 50%, #ffffff 100% ); transition: all .2s ease-in; } .global-nav .sub-menu li a:before { content: ''; position: absolute; top: 50%; left: 10px; width: 3px; height: 1.5em; transform: translateY(-50%); background: rgb(151,180,220); background: linear-gradient(180deg, rgba(151,180,220,1) 0%, rgba(0,48,96,1) 100%); } .global-nav .sub-menu li a:hover { background-position: 0 0; color: #fff; opacity: 1; transition: all .2s ease-in; } } @media (max-width: 767px) { .global-nav li > a { position: relative; } .global-nav .menu-item-has-children > a:before { width: 1rem; height: 2px; content: ''; background-color: #333; position:absolute; top: 50%; left: 10%; transform: translate(-50%,-50%); transition: .3s ease-in-out; } .global-nav .menu-item-has-children > a:after { width: 2px; height: 1rem; content: ''; background-color: #333; position:absolute; top: 50%; left: 10%; transform: translate(-50%,-50%); transition: .3s ease-in-out; } .global-nav .menu-item-has-children > a.open:after { transform: translate(-50%,-50%) rotate(90deg); } .global-nav .sub-menu li a { color: #fff; background-color: #014099; border-bottom: 1px solid #fff; } .global-nav .sub-menu li a:hover { background-color: #fff; color: #333; } } /*<<< 2022.01.11 グローバルメニューのサブメニュー化 by k.miyazaki <<<*/ /********************* Index Only(PC) by Maru *********************/ /* 新着エリア */ .news-banner a{ display: block; border:1px solid #ccc; color: #333; } .news_banner-text{padding: 15px;} .news_banner-text p{margin: 10px 0 15px;} .news_banner-text span{ width: 100%; display: block; text-align: right; } .arrowlink::before{ display: inline-block; content: ""; width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #777; border-width: 3px 0px 3px 6px; vertical-align: middle; margin-right: 5px; font-size: 12px; } .newtopics{display: table;} .topics-left,.topics-right{display: table-cell; vertical-align: top;} .topics-right{max-width: 250px;} .topics_title{font-size: 1.8rem; font-weight: normal; color: #00316c;} .topics_title > a{font-size: 12px; float: right; color: #777; margin-right: 30px;} #topics{margin-bottom: 10px; display: none;} #topics li{display: inline-block; background-color: #ccc; padding: 5px; cursor: pointer;} .topics_wrap{position: relative; display: block; min-width: 850px;} .topics_body{position: absolute; background-color: #fff; width: 100%; padding-right: 30px;} .topics_body li{ border-bottom: 1px dashed #333; padding-bottom: 10px; margin-bottom: 10px; font-size: 12px; } .topics_body li div{display: inline-block; margin-right: 10px; vertical-align: middle;} .topics_body .tcate{ color: #fff; padding:5px 8px; border-radius: 3px; font-size: 12px; text-align: center; width: 11em; /*カテゴリは最大１０文字表示*/ } /* カテゴリ色 */ .topics_body .tcate{background-color: #014099;} .topics_body .tcate.cate_4_col{background-color: #00439a;} .tsubj{max-width: 590px; word-break: break-all; line-height: 1.4;} .tsubj a{color: #333;} @media only screen and (max-width: 736px) { .news-banner a{min-height: 180px; position: relative;} .news-banner ul li{ width: 50%; padding: 5px; } .news-banner ul li figure img{width: 100%;} .news-banner ul{margin:0; padding: 5px;} .news_banner-text{padding: 10px;} .news_banner-text span{position: absolute; right: 10px; bottom: 10px; font-size: 12px;} .newtopics{padding:10px;} .topics-left{margin-bottom: 20px;} .newtopics, .topics-left, .topics-right{display: block;} .topics-right{max-width: 100%; text-align: center;} .topics_wrap{min-width: 100%;} .topics_body{padding-right: 0;} .topics_body li div{display: block; margin-bottom: 5px;} .topics_title{padding: 0 15px;} .topics_title.sp-font{font-size: 1.4rem;} } /* −−−−−−−−−−−−−−−−−−−−−−コンテンツエリア−−−−−−−−−−−−−−−−−−−−−− */ .content-wrap{ /* max-width: 1300px; */ margin: 0 auto; } .area-box{ padding: 80px 0; text-align: center; background-repeat: no-repeat; background-position: bottom; margin: 0 auto; } /* 各コンテンツの背景色、高さ、画像設定 */ .box-teacher{ background-color: #e5db85; height: 530px; background-image: url('../images/teacher-backimg.png'); } .box-movie{ height: 486px; background-color: #6ea9b7; background-image: url('../images/movie-backimg.jpg'); background-position: 70% 0; } .box-voice { background-color: #f3f3f3; /* height: 560px; */ /* background-image: url('../images/voice-backimg.jpg'); */ /* background-position: right bottom; */ } .box-voice .metaslider > div{margin:0;} .area-box.box-voice{padding: 0;} .box-voice ol.flex-control-nav{bottom: 15px;} .box-system{background-color: #fffbeb; height: 600px;} .box-course{background-color: #fff;} .box-merit{background-color: #f5f9fe;} .area-box h2, .area-box p{margin-bottom: 18px;} .area-box h2{font-size: 40px; line-height: 1; color: #00316c; font-weight: normal;} .area-box p{font-size: 16px;} /* 医学部医学科へ導く講師陣 */ /* .box-teacher h2{color: #00316c;} */ /* 授業風景 */ .box-movie h2, .box-movie p{color: #fff;} .youtube-wrap{max-width: 370px; margin:0 auto 20px;} .box-movie .youtube-resp{max-width: 370px;} /* コースのご案内・寮について */ .system-box a{display: block;} .col4.system-box li{padding: 0;} .system-box li:nth-of-type(1) .system-text{background-color: #568bdd;} .system-box li:nth-of-type(2) .system-text{background-color: #3aaade;} .system-box li:nth-of-type(3) .system-text{background-color: #27c0dc;} .system-box li:nth-of-type(4) .system-text{background-color: #02a59a;} .system-box li:nth-of-type(1) .system-text p{color: #568bdd;} .system-box li:nth-of-type(2) .system-text p{color: #3aaade;} .system-box li:nth-of-type(3) .system-text p{color: #27c0dc;} .system-box li:nth-of-type(4) .system-text p{color: #02a59a;} /* 校舎案内 */ .col3.school-link > li{ padding: 0; display: block; max-width: 350px; height: 350px; float: left; border-style: solid; border-color: #fff; border-width: 0 10px; } .col3.school-link > li:first-child{border-width: 0 10px 0 0;} .col3.school-link > li:last-child{border-width: 0 0 0 10px;} .school-link > li > a{ color: #fff; display: block; padding: 40px 20px; background-color: #2068c8; } /* .school-link > li > a > h3{font-size: 20px; margin-bottom: 30px;} .school-link > li > a > h3 > span{font-size: 40px; display: block; padding-top: 12px;} .school-link > li > a > p{border:1px solid #fff; padding: 10px; margin-bottom: 12px;} .school-link > li > a > ul{font-size: 13px; text-align: left; margin-bottom: 18px; line-height: 1.4;} .school-link > li > a > p.tel-text{ border:none; font-size: 26px; margin-bottom: 0; padding:0; letter-spacing: 2px; } */ .school-link > li > a > h3{font-size: 2rem; margin-bottom: 30px;} .school-link > li > a > h3 > span{font-size: 3rem; display: block; padding-top: 12px;} .school-link > li > a > p{border:1px solid #fff; padding: 10px; margin-bottom: 12px;} .school-link > li > a > ul{font-size: 1rem; text-align: left; margin-bottom: 18px; line-height: 1.4;} .school-link > li > a > p.tel-text{ border:none; font-size: 2rem; margin-bottom: 0; padding:0; letter-spacing: 2px; } /* CONTENTS */ .course-link a{ display: block; width: 33.33% ; height: 230px; float: left; background-color: #c3c0a8; border: 2px solid #fff; position: relative; } .course-link a figure{ display: inline-block; position: absolute; top: 40%; left: 50%; transform: translate( -50%, -50%); display: inline-block; } .course-link a figure.cl-ph{top: 35%;} .course-link a figure.cl-ph2 img{max-width: 300px;} .course-link a span{ font-size: 23px; color: #fff; position: absolute; top: 160px; left: 0; right: 0; margin: auto; } /* マップエリア */ .map-box .col2{border:none;} .access-box { color: #fff; display: block; background-color: #014099; height: 430px; position: relative; } .access-box > div{display: inline-block; position: absolute; top: 50px; right: 50px;} .access-box h3{font-size: 30px; margin-bottom: 30px; color: #fff799;} .access-box h3 > span{font-size: 20px; display: block; padding-top: 12px; color: #fff;} .add-text{margin-bottom: 35px;} .add-text li{line-height: 1.4;} .add-text li:first-child{margin-bottom: 16px;} .tel-text{margin-bottom: 30px;} .tel-text li{ border:none; font-size: 2rem; margin-bottom: 0; padding:0; letter-spacing: 2px; } .tel-text li a{color: #fff;} a.map-formlink{ max-width: 400px; display: block; border:1px solid #fff; padding: 10px; margin-bottom: 12px; text-align: center; font-size: 20px; color: #fff; } a.map-formlink::before{ display: inline-block; content: url('../images/icon-mail.png'); width: 28px; height: 18px; margin-right: 10px; position: relative; top: 2px; } /* −−−−−−−−−−−−−−−−−−−−−−コンテンツエリア SP−−−−−−−−−−−−−−−−−−−−−− */ @media only screen and (max-width: 736px) { .content-wrap{ width: 100%; } /* 各コンテンツの背景色、高さ、画像設定 */ .area-box{padding: 40px 10px;} .box-teacher,.box-movie,.box-voice,.box-system{ height: auto; background-image: none; } .area-box h2{font-size: 22px; font-weight: bold;} .area-box p{line-height: 1.4; margin-left: 0;} /* 医学部医学科へ導く講師陣 */ /* 授業風景 */ /* コースのご案内・寮について */ .system-box li:nth-of-type(odd){padding:5px 5px 5px 0;} .system-box li:nth-of-type(even){padding:5px 0 5px 5px;} .system-text{height: 60px;} .system-text p{ width: 100%; height: 50px; top: -30px; left: 0; } .system-text p span{top: 5px; left: 5px; font-size: 12px;} .system-text p i{font-style: normal; display: block; font-size: 10px;} .arrowlink-front{position: absolute; bottom: 10px; left: 10px; color: #fff;} .arrowlink-front::before{ content: "\00ff1e"; /* ＞ の文字　*/ margin-right: 5px; } /* 校舎案内 */ .col3.school-link > li{height: auto; float: none; margin:0 auto;} .col3.school-link > li, .col3.school-link > li:first-child, .col3.school-link > li:last-child{ border-width: 0 0 10px 0; } .school-link > li > a{ padding: 20px;} /* CONTENTS */ .course-link a{width: 50%; height: 150px; border-width: 5px;} .course-link a:nth-of-type(odd){border-width: 5px 5px 5px 0;} .course-link a:nth-of-type(even){border-width: 5px 0 5px 5px;} .course-link a figure{padding:10px;} .course-link a figure.cl-ph2 img{max-width: 120px;} .course-link a span{font-size: 16px; top: 90px;} /* マップエリア */ .access-box{height: 100%;} .access-box > div{ display: block; position: static; text-align: center; padding: 16px; } .map-box .col{margin-bottom: 0;} .access-box h3{font-size: 25px; margin-bottom: 15px;} .access-box h3 > span{font-size: 18px;} .add-text{margin-bottom: 15px;} .add-text li:first-child{font-size: 35px;} .tel-text{margin-bottom: 15px;} .tel-text li{ border:none; font-size: 1.8rem; margin-bottom: 0; padding:0; letter-spacing: 2px; } .footer a.map-formlink{ width: calc(100% - 20px); padding: 10px; margin: 0 auto; } .map-formlink::before{ margin-right: 10px; } } /********************* FOOTER STYLES by Maru *********************/ .footer { background-color: #003060; } .footer a{color: #fff; display: block;} .footer-formbtn{background-color: #fff; margin-bottom: 55px;} .footer-formbtn .col2:nth-of-type(1), .footer-formbtn .col2:nth-of-type(2){border-left:none; border-right:none;} /* .footer-formbtn .col3:nth-of-type(1), .footer-formbtn .col3:nth-of-type(2), .footer-formbtn .col3:nth-of-type(3){border-left:none; border-right:none;} */ .footer-formbtn div:nth-of-type(1) a{background-color: #e6002d;} .footer-formbtn div:nth-of-type(2) a{background-color: #014099;} .footer-formbtn div:nth-of-type(3) a{background-color: #00BFFE;} .footer-formbtn div a{ display: block; height: 100px; line-height: 100px; color: #fff; text-align: center; } .footer-formbtn div a span{vertical-align: middle;} .footer-formbtn div a span:nth-of-type(1){margin-right: 16px;} .footer-formbtn div a span:nth-of-type(2){font-size: 25px; margin-right: 25px;} .footer-formbtn div a span:nth-of-type(3){font-size: 14px;} .footer-formbtn div a span:nth-of-type(3)::after{ content: "\003009"; /* 〉の文字 */ margin-left: 28px; } .footer-logo {text-align: center; margin-bottom: 65px;} .footer-logo img{padding: 20px 0;} .footer-logo p{line-height: 1.6;} .footer-school_link .col3 > li{ border-style: solid; border-color: transparent; border-width: 0 10px; line-height: 1.6; } .footer-school_link .col3 > li > a{ display: block; border-bottom: 1px solid #fff; padding-bottom: 10px; } .footer-school_link > ul > li > a h3{font-size: 19px;} .footer-school_link > ul > li > a h3 > span{font-size: 27px; margin-left: 5px;} .footerlink-area{display: table; width: 100%; margin-bottom: 40px;} /*.footer-widgets{display: table-cell; width: 25%; vertical-align: top;}*/ .footer-widgets{display: table-cell; width: 40%; vertical-align: top;} .footer-widgets h3{color: #fff; border-left: 5px solid #fff; padding-left: 5px;} .footer-widgets ul{line-height: 1.6; margin-bottom: 10px;} .footer-widgets li::before{} .footer-widgets li a::before{ display: inline-block; content: ""; width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #FFF; border-width: 3px 0px 3px 6px; vertical-align: middle; margin-right: 5px; font-size: 12px; } /*2021/12/16 フッターメニュー追加に伴う変更 k.miyazaki*/ /*nav.footer-gnavi{float: none; max-width: 900px; margin: 0 auto 20px;}*/ nav.footer-gnavi{float: none; margin: 0 auto 20px;} nav.footer-gnavi ul{display: table; width: 100%;} nav.footer-gnavi li{ display: table-cell; vertical-align: top; border-left: 1px solid #fff; text-align: center; } nav.footer-gnavi li:last-child{border-right: 1px solid #fff;} nav.footer-gnavi li a{display: block; padding: 0 10px;} .footer-copyright{ text-align: center; color: #fff; padding-bottom: 20px; font-size: 12px; } .gakkengroup{padding-bottom:20px; text-align: center;} .gakkengroup img{max-width: 160px;} /*2024/1/31 フッター調整 nakagaki*/ .yfont{ color: #FFEF6C; font-weight: bold; font-size: 2.5rem; } /* スマホ用電話リンク非表示 */ .footer-formbtn .tellink{display: none;} @media only screen and (max-width: 736px) { .footer-formbtn .tellink{display: block;} .yfont{font-size: 1.9rem;} } /* @media only screen and (min-width: 1600px) { .footer-formbtn{display: table; width: 100%;} .footer-formbtn .col3{display: table-cell; width: 33.33%;} } */ @media only screen and (max-width: 736px) { .footer a{padding:0 10px;} .footerlink-area{display: block; padding:10px;} .footer-widgets ul{line-height: 2; margin-bottom: 20px;} .footer-formbtn div a{ height: auto; line-height: 1.4; padding: 20px 0; } .footer-formbtn div a span:nth-of-type(1){display: inline-block;} .footer-formbtn div a span:nth-of-type(3){display: block;} .footer-formbtn div a span:nth-of-type(3)::after{ content: "\003009"; /* 〉の文字 */ margin-left: 28px; } .footer-widgets{display: block; width: 100%;} nav.footer-gnavi li{display: block; border:none;} nav.footer-gnavi li a{display: block; padding: 10px 0; border-bottom: 1px dashed #fff;} nav.footer-gnavi li:first-child a{border-top: 1px dashed #fff;} nav.footer-gnavi li:last-child{border-right: none;} .course-link a figure.cl-ph2 img{max-width: 100%;} .course-link a span{padding: 5px;} } /* ========================================================================== wordpress CSS ========================================================================== */ /********************* POSTS & CONTENT STYLES *********************/ /*>>> 2020.09.11 グローバルメニューの固定化 by k.miyazaki >>>*/ #content { /*margin-top: 1.5em;*/ /*margin-top: 0;*/ margin-top: 70px; } @media only screen and (max-width: 1070px) { #content {margin-top: 50px;} } @media only screen and (max-width: 736px) { #content {margin-top: 56px;} } /*<<< 2020.09.11 グローバルメニューの固定化 by k.miyazaki <<<*/ /* 固定ページ、投稿ページ共通デフォルト設定 -------------------------------------------------- */ /* 行間設定 */ .entry-content{line-height: 1.6;} /* 固定ページ用デフォルト設定 -------------------------------------------------- */ .hentry { background-color: white; /*border-radius: 3px;*/ margin-bottom: 1.5em; /*border: 1px solid #cccccc;*/ } .hentry header { border-bottom: 1px solid #f8f9fa; /*padding: 1.5em;*/ } .hentry footer { /*padding: 1.5em;*/ /*border-top: 1px solid #f8f9fa;*/ } .hentry footer p { margin: 0; } /* end .hentry */ .single-title, .page-title, .entry-title { margin: 0; } /* want to style individual post classes? Booya! */ /* post by id (i.e. post-3) */ /* general post style */ /* general article on a page style */ /* general style on an attatchment */ /* sticky post style */ /* hentry class */ /* style by category (i.e. category-videos) */ /* style by tag (i.e. tag-news) */ /* post meta */ .byline { color: #9fa6b4; font-style: italic; margin: 0; } /****************************************************************** PAGE NAVI STYLES ******************************************************************/ .pagination, .wp-prev-next {margin: 1.5em 0; } .pagination {text-align: center; width: 100%;} .pagination ul { display: inline-block; background-color: white; white-space: nowrap; padding: 0; clear: both; border-radius: 3px; } .pagination li { padding: 0; margin: 0; float: left; display: inline; overflow: hidden; border-right: 1px solid #eaedf2; } .pagination a, .pagination span { margin: 0; text-decoration: none; padding: 0; line-height: 1em; font-size: 1em; font-weight: normal; padding: 0.75em; min-width: 1em; display: block; color: #2980b9; } .pagination a:hover, .pagination a:focus, .pagination span:hover, .pagination span:focus { background-color: #2980b9; color: white; } .pagination .current {cursor: default; color: #5c6b80; } .pagination .current:hover, .pagination .current:focus {background-color: white; color: #5c6b80; } /* end .bones_page_navi */ /* fallback previous & next links */ .wp-prev-next .prev-link { float: left; } .wp-prev-next .next-link { float: right; } /* end .wp-prev-next */ /****************************************************************** COMMENT STYLES ******************************************************************/ /* h3 comment title */ #comments-title { padding: 0.75em; margin: 0; border-top: 1px solid #f8f9fa; /* number of comments span */ } .commentlist { margin: 0; list-style-type: none; } .comment { position: relative; clear: both; overflow: hidden; padding: 1.5em; border-bottom: 1px solid #f8f9fa; /* vcard */ /* end .commentlist .vcard */ /* end children */ /* general comment classes */ } .comment .comment-author { padding: 7px; border: 0; } .comment .vcard { margin-left: 50px; } .comment .vcard cite.fn { font-weight: 700; font-style: normal; } .comment .vcard time { display: block; font-size: 0.9em; font-style: italic; } .comment .vcard time a { color: #9fa6b4; text-decoration: none; } .comment .vcard time a:hover { text-decoration: underline; } .comment .vcard .avatar { position: absolute; left: 16px; border-radius: 50%; } .comment:last-child { margin-bottom: 0; } .comment .children { margin: 0; /* variations */ /* change number for different depth */ } .comment[class*=depth-] { margin-top: 1.1em; } .comment.depth-1 { margin-left: 0; margin-top: 0; } .comment:not(.depth-1) { margin-top: 0; margin-left: 7px; padding: 7px; } .comment.odd { background-color: white; } .comment.even { background: #f8f9fa; } /* comment meta */ /* comment content */ .comment_content p { margin: 0.7335em 0 1.5em; font-size: 1em; line-height: 1.5em; } /* end .commentlist .comment_content */ /* comment reply link */ .comment-reply-link { font-size: 0.9em; float: right; } /* end .commentlist .comment-reply-link */ /* edit comment link */ .comment-edit-link { font-style: italic; margin: 0 7px; text-decoration: none; font-size: 0.9em; } /****************************************************************** COMMENT FORM STYLES ******************************************************************/ h2.form_enter{ font-size: 20px; background-color: #f0f0f0; border-bottom: 2px solid #de1109; border-left: 8px solid #de1109; padding: 10px 0; padding-left: 15px; margin-bottom: 14px; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; } h2.form_sub{font-size: 20px; color:#de1109;} .comment-respond { padding: 1.5em; border-top: 1px solid #f8f9fa; } span.form_va01{ color:#fff; background-color:#de1109; font-size: 0.7em; font-weight: normal; padding: 2px 4px; border-radius:3px; position: relative; top:-2px; } #reply-title { margin: 0; } .logged-in-as { color: #9fa6b4; font-style: italic; margin: 0; } .logged-in-as a { color: #5c6b80; } .comment-form-comment { margin: 1.5em 0 0.75em; } .form-allowed-tags { padding: 1.5em; background-color: #f8f9fa; font-size: 0.9em; } /* comment submit button */ #submit { float: right; font-size: 1em; } /* comment form title */ #comment-form-title { margin: 0 0 1.1em; } /* cancel comment reply link */ /* logged in comments */ /* allowed tags */ #allowed_tags { margin: 1.5em 10px 0.7335em 0; } /* no comments */ .nocomments { margin: 0 20px 1.1em; } /********************* SIDEBARS & ASIDES *********************/ #submenu{ width: 100%; border-top: 3px solid #00439a; } #submenu li{border-bottom: 1px solid #d2d2d2;} #submenu li br{display: none;} #submenu li.parent_page_item{border-color: #00439a; font-size: 19px; text-align: center;} #submenu li.current_page_item a{color: #00439a;} #submenu a{display: block; padding: 20px 0; color: #333; font-size: 16px;} .widget ul li {} .no-widgets {} /* ========================================================================== カテゴリー、シングルCSS ========================================================================== */ .single h1.entry-title, .archive h3.entry-title{font-size: 16px;} .single #main{padding-top: 30px;} .single h1.entry-title, .archive h3.entry-title{ font-size: 25px; padding: 0 0 5px 0; border-bottom: 2px solid #dae5f2; margin: 0 0 50px 0; position: relative; line-height: 1.8; font-weight: normal; } .single h1.entry-title::after, .archive h3.entry-title::after{ display: block; content: ""; width: 165px; height: 2px; background: #00439a; position: absolute; bottom: -2px; left: 0; } .single h1.entry-title a, .single h1.entry-title a:link, .single h1.entry-title a:hover, .single h1.entry-title a:visited, .single h1.entry-title a:active, .archive h3.entry-title a, .archive h3.entry-title a:link, .archive h3.entry-title a:hover, .archive h3.entry-title a:visited, .archive h3.entry-title a:active {color: #333;} .byline{text-align: right; font-style: normal;} /* ========================================================================== 固定ページ共通レイアウト by Maru ========================================================================== */ /* ========================================================================== Print styles ========================================================================== */ @media print { *, *:before, *:after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } #tab ul{ width:600px; } #tab li{ float:left; } #tab li a{ display:block; width:198px; height:48px; line-height:50px; text-align:center; border:#ccc 1px solid; } #tabBox1,#tabBox2,#tabBox3,#tabBox4{ width:598px; height:300px; border:#ccc 1px solid; } #tabBox1{ background:#FCF; } #tabBox2{ background:#FFC; display:none; } #tabBox3{ background:#ccc; display:none; } #tabBox4{ background:#d33; display:none; } /* 共通テーブルデザイン --------------------------------------------- */ .table-blue04{width: 770px; border-collapse: collapse; margin-bottom: 20px;} .table-blue04 th, .table-blue04 td{text-align: center;} .table-blue04 th{height: 2em; border:2px solid #FFF; background: #3b3b3b; color:#fff;} .table-blue04 td{padding: 1em; border:2px solid #FFF; background: #eee;} .table-blue04 .title{background: #5182cd; color: #fff; font-weight: bold;} .form_btn01 {text-align:center;} .form_btn01 a{background-color:#e6002d;color:#fff;font-size:1.5em;padding:10px 50px;border-radius:8px;font-weight:bold;margin:0 auto;} /*** 寮について ***/ .table-blue05{width: 100%; border-collapse: collapse;margin-bottom: 20px;} .table-blue05 th, .table-blue05 td{padding: .8em; border:2px solid #FFF; text-align: center;} .table-blue05 th{background: #3d3d3d; color: #fff;} .table-blue05 td{background: #eee;} .table-blue05 tr td:first-child{background: #5182cd; color: #fff; text-align: center; font-weight: bold;} .table-blue05 tr td:nth-child(2){padding-left: 2em;} @media only screen and (max-width: 736px) { .table-blue05 th{display: none;} .table-blue05, .table-blue05 tbody, .table-blue05 tr, .table-blue05 th, .table-blue05 td{display: block; width: 100%;} } /* 共通フォームデザイン --------------------------------------------- */ .form-design01 .table-form01{border-collapse: separate; border-spacing: 6px 6px;} .form-design01 .table-form01 td:first-child{background:#e1edfb; text-align: center; padding: 10px;} .form-design01 .table-form01 td[colspan]{background:#fff;} .table-form01 td{padding: 10px;} @media only screen and (max-width: 736px) { .table-form01 td{padding: 0;} } @media only screen and (min-width: 737px) { .table-form01 td:first-child {width: 31%;} } /* MEDiC文字 */ .medic-i{color: #f00; font-style: normal;} /* 重要なお知らせ */ .marquee-wrap{ border: 2px solid #97b4dc; padding: 20px; margin-bottom: 40px; } .marquee-title{ border-bottom: 1px dashed #97b4dc; color: #014099; padding-bottom: 10px; margin-bottom: 10px; font-size: 20px; font-weight: bold; } .marquee-title a{color: #014099;} /* 20220608追加 */ .table-design01{ width: 100%; border-top: 1px solid #ccc; border-left: 1px solid #ccc; } .table-design01 th, .table-design01 td{ padding: 10px; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; text-align: center; } .table-design01 thead th{background: #3499d6; color: #fff;} .table-design01 tbody tr:nth-of-type(even){background: #dfeaf8;} .table-design01 tbody tr td:nth-of-type(1){text-align: left;} .table-design01 tbody tr td:nth-of-type(2){background: #fff;} a.form-linkbtn{ margin:20px auto; display:block; background: #236ac9; color:#fff; text-align:center; font-size:18px; font-weight:bold; width:100%; padding:10px 0; border-radius: 5px; } .form-linkbtn::after{content: "＞"; margin-left: 1em;} @media only screen and (max-width: 736px) { .table-design01 th, .table-design01 td{ padding: 5px; font-size: 12px; } }