@charset "UTF-8";
/* CSS Document */
/* ==========================================================================
Base
========================================================================== */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html.is-fixed,
html.is-fixed body {
height: 100%;
overflow: hidden;
}/**/
.scroll-prevent {
position: fixed;
z-index: -1;
width: 100%;
height: 100%;
}
/*// Footer固定↓↓↓ //*/
html, body { height: 100%;}
body > footer {
position: sticky;
top: 100vh;}
/*// Footer固定↑↑↑ //*/
body {
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
font-family: "Arial", "メイリオ";
font-size:min(3.4vw,18px);
}
section {
margin: 0 auto 5.5rem;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/* Correct `inline-block` display not defined in IE 8/9. */
audio,
canvas,
video {
display: inline-block;
}
/* Prevent modern browsers from displaying `audio` without controls.Remove excess height in iOS 5 devices. */
audio:not([controls]) {
display: none;
height: 0;
}
/* Address `[hidden]` styling not present in IE 8/9.Hide the `template` element in IE, Safari, and Firefox < 22.*/
[hidden],
template {
display: none;
}
.mt010 {margin-top: 1rem!important;}
.mb005 {margin-bottom: .5rem;}
.mb010 {margin-bottom: 1rem;}
.mb015 {margin-bottom: 1.5rem;}
.mb020 {margin-bottom: 2rem!important;}
.mb025 {margin-bottom: 2.5rem!important;}
.mb030 {margin-bottom: 3rem!important;}
.mb035 {margin-bottom: 3.5rem!important;}
.mtb030 { margin: 4rem 0 6rem!important;}
.pt005 {padding-top: .5rem;}
.pt010 {padding-top: 1rem;}
.pt015 {padding-top: 1.5rem;}
.pt020 {padding-top: 2rem!important;}
.pt025 {padding-top: 2.5rem!important;}
.pt030 {padding-top: 3rem!important;}
.pt035 {padding-top: 3.5rem!important;}
.pb005 {padding-bottom: .5rem;}
.pb010 {padding-bottom: 1rem;}
.pb015 {padding-bottom: 1.5rem;}
.pb020 {padding-bottom: 2rem!important;}
.pb025 {padding-bottom: 2.5rem!important;}
.pb030 {padding-bottom: 3rem!important;}
.pb035 {padding-bottom: 3.5rem!important;}
.w28p { width: 28%;}
.w32p { width: 32%;}
.w50p { width: 50%;}
.w100p { width: 100%;}
.only_pc {display: inline-block!important;}
.only_tab {display: none!important;}
.only_smp {display: none!important;}
.from_pc {display: inline-block;}
.from_tab {display: none;}
.from_smp {display: none;}
.with_pctab {display: inline-block;}
.with_pcsmp {display: inline-block;}
.with_tabsmp {display: none;}
/* ======================================================
COLUMN
====================================================== */
#column_1 { border: 1px solid red;}
#column_2 .content, #column_2 .side { border: 1px solid blue;}
#column_1 { margin-bottom: 30px!important;}
#column_2 {
display: flex;
justify-content: space-between;
margin-bottom: 30px!important;
}
#column_2 .content {
/*float: left;*/
width: calc(80% - 15px);
margin-right: 15px;
}
#column_2 .side {
/*float: right;*/
width: 20%;
}
.side_section {
margin-bottom: 15px;
}
.side_ttl {
margin-bottom: 10px;
background: #808080;
color: #fff;
}
/* ==========================================================================
Links
========================================================================== */
a {
background: transparent;
text-decoration: none;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
a:focus {
outline: thin dotted;
}
a:hover {
opacity: .5;
}
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
TYPOGRAPHY
========================================================================== */
p { margin: 0; padding: 0;}
strong { font-weight: bold;}
.ffMplus1 { font-family: 'M PLUS 1p', sans-serif;}
.ffNoSa { font-family: 'Noto Sans', sans-serif;}
.ffNoSe { font-family: 'Noto Serif JP', serif;}
.fs16px { font-size: 16px;}
.fs22px { font-size: 22px;}
.fs24px { font-size: 24px;}
.fs30px { font-size: 30px;}
.fs35px { font-size: 35px;}
.fs008 { font-size: .8em;}
.fs009 { font-size: .9em;}
.fs010 { font-size: 1em;}
.fs011 { font-size: 1.1em;}
.fs012 { font-size: 1.2em;}
.fs013 { font-size: 1.3em;}
.fs014 { font-size: 1.4em;}
.fs015 { font-size: 1.5em;}
.fs016 { font-size: 1.6em;}
.fs017 { font-size: 1.7em;}
.fs018 { font-size: 1.8em;}
.fs019 { font-size: 1.9em;}
.fs020 { font-size: 2em;}
.fwB { font-weight: bold;}
.talignL { text-align: left;}
.talignC { text-align: center;}
.talignR { text-align: right;}
.lhe010 { line-height: 1.0;}
.lhe012 { line-height: 1.2;}
.lhe015 { line-height: 1.5;}
.lhe018 { line-height: 1.8;}
/*------ グラデーションテキスト ------*/
.txt_grad {
background: linear-gradient(90deg, #4158D0, #C850C0 30%, #FFCC70);
background: -webkit-linear-gradient(0deg, #4158D0, #C850C0 30%, #FFCC70);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ======================================================
H1, H2, H3, H4, H5 STYLES
====================================================== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
text-rendering: optimizelegibility;
font-weight: 700;
letter-spacing: .1em;
}
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
text-decoration: none;
}
h1 {
font-size: 200%;
}
h2 {
font-size: 150%;
}
h3 {
font-size: 120%;
}
h4 {
font-size: 110%;
}
h5 {
font-size: 100%;
}
/* ==========================================================================
LISTS
========================================================================== */
ul,ol,dl { list-style: none;}
/* ==========================================================================
IMAGES
========================================================================== */
img {
width: 100%;
height: auto;
max-width: 100%;
margin: 0 auto;
padding: 0;
border: 0;
vertical-align: bottom;
}
svg:not(:root) {
overflow: hidden;
}
/* ======================================================
BUTTONS
====================================================== */
.btn,
a.btn,
button.btn {
display: inline-block;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 1rem .5rem .8rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all .3s;
background: #999;
border-radius: .5rem;
font-size: 1rem;
color: #212529;
font-weight: 700;
line-height: 1;
letter-spacing: .1em;
text-align: center;
vertical-align: middle;
text-decoration: none;
width: calc(100% / 5 - .5em);
}
.btn:hover { background: #808080;}
.btn:hover,
a.btn:hover,
button.btn:hover { opacity: 1;}
a.btn i.fa {margin-right: 1rem;}
.fa-position-left {
position: absolute;
top: calc(50% - 0.5em);
left: 1rem;
}
.fa-position-right {
position: absolute;
top: calc(50% - .5em);
right: 1rem;
}
/*---- アイコン変化 ----*/
.btn.icon_change {
margin-bottom: 0;
border-radius: 2rem;
background: #fff20a;
}
.btn.icon_change:hover { background: #ffa500;}
.btn.icon_change::before {
position: absolute;
top: calc(50% - .6rem);
left: 1.5rem;
margin: 0;
padding: 0;
content: "\f0e0";
font-family: "Font Awesome 5 Free";
font-size: 1.2rem;
font-weight: normal;
}
.btn.icon_change:hover::before { content: "\f2b6";}
/*---- プッシュ ----*/
.btn.push {
background: #fff20a;
border-bottom: 5px solid #ccc100;
border-radius: 100vh;
}
.btn.push:hover {
color: #000;
background: #fff20a;
margin-top: 3px;
border-bottom: 2px solid #ccc100;
}
/*---- 浮上 ----*/
.btn.ascend {
color: #fff;
border: 2px solid #fff;
border-radius: 3rem;
background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#fee140));
background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);
background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
}
.btn.ascend:hover {
-webkit-transform: translate(0, -2px);
transform: translate(0, -2px);
color: #fff;
-webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
}
/*---- 拡大 ----*/
.btn.zoom {
-webkit-transition: all 0.3s;
transition: all 0.3s;
color: #fff;
border-radius: 100vh;
background-image: -webkit-gradient(
linear,
left top,
right top,
from(#007adf),
to(#00ecbc)
);
background-image: -webkit-linear-gradient(left, #007adf 0%, #00ecbc 100%);
background-image: linear-gradient(to right, #007adf 0%, #00ecbc 100%);
-webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
.btn.zoom:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
color: #fff;
}
.btn.zoom::before {
position: absolute;
content: "\f054";
font-family: "Font Awesome 5 Free";
font-size: 1.1rem;
top: calc(50% - 0.5rem);
right: 1rem;
margin: 0;
padding: 0;
}
/*---- フラット-斜め拡大 ----*/
a.btn-flat {
overflow: hidden;
padding: 1.5rem 0;
color: #fff;
border-radius: 0;
background: #000;
}
a.btn-flat:hover { color: #000;}
a.btn-flat span { position: relative;}
a.btn-flat::before {
position: absolute;
content: '';
top: 0;
left: 30px;
width: 150%;
height: 500%;
background: #fff100;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-70%) rotate(135deg);
transform: translateX(-98%) translateY(-70%) rotate(135deg);
}
a.btn-flat:hover::before {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(135deg);
transform: translateX(-9%) translateY(-25%) rotate(135deg);
}
/* ======================================================
SNS BUTTONS
====================================================== */
.sns_pake {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 75%;
margin: 0 auto 1rem;
}
/* アイコン同士の余白 */
.sns_pake li {
flex:0 0 5%;
text-align:center!important;
}
.btn_snsSimple:hover,
.btn_snsRBclo:hover,
.btn_snsBlack:hover,
.btn_snsRblack:hover,
.btn_snsApp:hover { opacity: 1;}
/* ---------------------------
ICON - Simple
--------------------------- */
.btn_snsSimple {
display: inline-block;
font-size: 40px;
line-height: 1em;
text-decoration: none;
transition: .5s;
}
.btn_snsSimple:hover {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
/* Twitter */
.btn_snsSimple .fa-twitter-square { color: #55acee;}
/* Instagram */
.btn_snsSimple .fa-instagram { color: #c6529a;}
/* Facebook*/
.btn_snsSimple .fa-facebook-square { color: #3b5998;}
/* Feedly */
.btn_snsSimple .fa-rss-square { color: #6cc655;}
/* Pocket */
.btn_snsSimple .fa-get-pocket { color: #ef3f56;}
/* はてブ */
.btn_snsSimple .fa-bootstrap { color: #1ba5dc;}
/* YouTube */
.btn_snsSimple .fa-youtube-square { color: #fc0d1c;}
/* LINE@ */
.btn_snsSimple .fa-line { color: #00c300;}
/* お問い合わせメール */
.btn_snsSimple .fa-envelope-square { color: #f3981d;}
/* ---------------------------
ROUND BORDER - Color
--------------------------- */
.btn_snsRBclo {
border-radius:50%;
position:relative;
display:inline-block;
width:50px;
height:50px;
font-size:30px;
text-decoration:none;
transition:.5s;
}
.btn_snsRBclo:hover { color:#fff!important;}
.btn_snsRBclo i {
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* Twitter */
.btn_snsRBclo.fl_tw2 { border:solid 1px #55acee; color:#55acee;}
.btn_snsRBclo.fl_tw2:hover { border:solid 1px #55acee; background:#55acee;}
/* Instagram */
.btn_snsRBclo.insta_btn2 { border:solid 1px #c6529a; color:#c6529a; font-size:35px;}
.btn_snsRBclo.insta_btn2:hover { border:solid 1px #c6529a; background:#c6529a;}
/* Facebook */
.btn_snsRBclo.fl_fb2 { border:solid 1px #3b5998; color:#3b5998;}
.btn_snsRBclo.fl_fb2:hover { border:solid 1px #3b5998; background:#3b5998;}
/* Feedly */
.btn_snsRBclo.fl_fd2 { border:solid 1px #6cc655; color:#6cc655; font-size:28px;}
.btn_snsRBclo.fl_fd2:hover { border:solid 1px #6cc655; background:#6cc655;}
/* Pocket */
.btn_snsRBclo.fl_pk2 { border:solid 1px #ef3f56; color:#ef3f56; font-size:32px;}
.btn_snsRBclo.fl_pk2:hover { border:solid 1px #ef3f56; background:#ef3f56;}
/* はてブ */
.btn_snsRBclo.fl_hb2 { border:solid 1px #1ba5dc; color:#1ba5dc; font-size:25px;}
.btn_snsRBclo.fl_hb2:hover { border:solid 1px #1ba5dc; background:#1ba5dc;}
/* YouTube */
.btn_snsRBclo.fl_yu2 { border:solid 1px #fc0d1c; color:#fc0d1c; font-size:28px;}
.btn_snsRBclo.fl_yu2:hover { border:solid 1px #fc0d1c; background:#fc0d1c;}
/* LINE */
.btn_snsRBclo.fl_li2 { border:solid 1px #00c300; color:#00c300; font-size:35px;}
.btn_snsRBclo.fl_li2:hover { border:solid 1px #00c300; background:#00c300;}
/* お問い合わせ */
.btn_snsRBclo.fl_ma2 { border:solid 1px #f3981d; color:#f3981d; font-size:28px;}
.btn_snsRBclo.fl_ma2:hover { border:solid 1px #f3981d; background:#f3981d;}
/* ---------------------------
ICON - Black
--------------------------- */
.btn_snsBlack {
display: inline-block;
font-size: 35px;
text-decoration: none;
transition: .5s;
color: #444;
}
.btn_snsBlack .fa-instagram,
.btn_snsBlack .fa-get-pocket,
.btn_snsBlack .fa-get-pocket,
.btn_snsBlack .fa-line { font-size:38px;}
/* Twitter */
.btn_snsBlack .fa-twitter:hover { color:#55acee;}
/* Instagram */
.btn_snsBlack .fa-instagram:hover { color:#c6529a;}
/* Facebook */
.btn_snsBlack .fa-facebook-f:hover { color:#3b5998;}
/* Feedly */
.btn_snsBlack .fa-rss:hover { color:#6cc655;}
/* Pocket */
.btn_snsBlack .fa-get-pocket:hover { color:#ef3f56;}
/* はてブ */
.btn_snsBlack .fa-bold:hover { color:#1ba5dc;}
/* YouTube */
.btn_snsBlack .fa-youtube:hover { color:#fc0d1c;}
/* LINE */
.btn_snsBlack .fa-line:hover { color:#00c300;}
/* メールアイコン */
.btn_snsBlack .fa-envelope:hover { color:#f3981d;}
/* ---------------------------
Round - Black
--------------------------- */
.btn_snsRblack {
border-radius:50%;
position:relative;
display:inline-block;
width:50px;
height:50px;
font-size:30px;
text-decoration:none;
transition:.5s;
background-color:#444;
color:#fff;
}
.btn_snsRblack:hover { text-decoration:none;}
.btn_snsRblack i {
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* Twitter */
.btn_snsRblack.fl_tw2:hover { background:linear-gradient(135deg, #13f1fc 0%,#0470dc 100%);}
/* Instagram */
.btn_snsRblack.insta_btn2:hover {
background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
}
/* Facebook */
.btn_snsRblack.fl_fb2:hover {
background:-webkit-linear-gradient(top, #5c80c6 0%, #34528c 74%);
background:linear-gradient(to bottom, #5c80c6 0%, #34528c 74%);
}
/* Feedly */
.btn_snsRblack.fl_fd2:hover {
background:linear-gradient(135deg, #b1ea4d 0%,#459522 100%);
font-size:28px;
}
/* Pocket */
.btn_snsRblack.fl_pk2:hover {
background:linear-gradient(135deg, #f36265 0%,#dd4f68 100%);
}
/* はてブ */
.btn_snsRblack.fl_hb2 { font-size:25px;}
.btn_snsRblack.fl_hb2:hover {
background:-webkit-linear-gradient(top, #1fbccd 0%, #1c91d4 84%);
background:linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%);
}
/* YouTube */
.btn_snsRblack.fl_yu2:hover {
background:linear-gradient(135deg, #f5515f 0%,#c9293c 100%);
}
/* LINE */
.btn_snsRblack.fl_li2:hover {
background: linear-gradient(135deg, #3a9278 0%,#00c300 100%);
}
/* お問い合わせ */
.btn_snsRblack.fl_ma2:hover {
background:linear-gradient(135deg, #fad961 0%,#f76b1c 100%);
}
/* ---------------------------
APP - Color
--------------------------- */
.btn_snsApp {
border-radius: 13px;
position: relative;
display: inline-block;
width: 50px;
height: 50px;
font-size: 33px;
color: #fff!important;
transition: .5s;
text-decoration: none;
}
/* アイコンをど真ん中に*/
.btn_snsApp i {
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
.btn_snsApp:hover {
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
}
/* Twitter */
.fl_tw1 { background:#55acee;}
/* Instagramアイコン位置 */
.insta_btn6 .fa-instagram { font-size:40px;}
.insta_btn6 {/* 紫グラデ背景 */
background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
overflow:hidden;
}
.insta_btn6::before {/* オレンジグラデ背景 */
content: '';
position: absolute;
top:27px;
left:-12px;
width:59px;
height:40px;
background:-webkit-radial-gradient(#ffdb2c 7%, rgba(255, 105, 34, 0.3) 60%, rgba(255, 88, 96, 0) 70%);
background:radial-gradient(#ffdb2c 7%, rgba(255, 105, 34, 0.3) 60%, rgba(255, 88, 96, 0) 70%);
}
/* Facebook */
.fl_fb6 { background:-webkit-linear-gradient(top, #5c80c6 0%, #34528c 74%); background:linear-gradient(to bottom, #5c80c6 0%, #34528c 74%);}
.fl_fb6 .fa-facebook-f { position:relative; top:23px; left:17px; font-size:43px;}
/* Feedly */
.fl_fd6 { background:#33b151;}
/* Pocket */
.fl_pk6 { color:#ef3f56!important; box-shadow:0 0 2px #888; font-size:35px;}
/* はてブ */
.fl_hb6 { background:-webkit-linear-gradient(top, #1fbccd 0%, #1c91d4 84%); background: linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%); font-size: 25px;}
/* YouTube */
.fl_yu6 { color: #fc0d1c!important; box-shadow:0 0 2px #888;}
/* LINE@ */
.fl_li6 { background: #00c300;}
/* メール */
.fl_ma6 { background: linear-gradient(135deg, #1B77F1 0%,#19BDFC 100%);}
/* ==========================================================================
FLEX
========================================================================== */
.flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.aitemC { align-items: center;}
.aitemFS { align-items: flex-start;}
.aitemFe { align-items: flex-end;}
.juscC { justify-content: center;}
.juscFe { justify-content: flex-end;}
.flex .w05p { width: 5%;}
.flex .w10p { width: 10%;}
.flex .w15p { width: 15%;}
.flex .w20p { width: 20%;}
.flex .w25p { width: 25%;}
.flex .w30p { width: 30%;}
.flex .w35p { width: 35%;}
.flex .w40p { width: 40%;}
.flex .w45p { width: 45%;}
.flex .w48p { width: 48%;}
.flex .w49p { width: 49%;}
.flex .w50p { width: 50%;}
.flex .w55p { width: 55%;}
.flex .w60p { width: 60%;}
.flex .w65p { width: 65%;}
.flex .w70p { width: 70%;}
.flex .w75p { width: 75%;}
.flex .w80p { width: 80%;}
.flex .w85p { width: 85%;}
.flex .w90p { width: 90%;}
.flex .w95p { width: 95%;}
.flex .w100p { width: 100%;}
/* ==========================================================================
FORMS
========================================================================== */
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em; }
/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */ }
/**
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
*/
button,
input,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 2 */
margin: 0;
/* 3 */ }
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal; }
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none; }
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */ }
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default; }
/**
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box; }
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0; }
/**
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */ }
/* ==========================================================================
TABLES
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0; }
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.image-replacement,
.ir {
text-indent: 100%;
white-space: nowrap;
overflow: hidden; }
.clearfix, .cf, .comment-respond {
zoom: 1; }
.clearfix:before, .clearfix:after, .cf:before, .comment-respond:before, .cf:after, .comment-respond:after {
content: "";
display: table;
}
.clearfix:after, .cf:after, .comment-respond:after {
clear: both;
}
/*
use the best ampersand
http://simplebits.com/notebook/2008/08/14/ampersands-2/
*/
span.amp {
font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important;
font-style: italic;
}
/* ==========================================================================
INPUTS
========================================================================== */
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: #5c6b80;
border-radius: 3px;
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;
box-sizing: border-box;
}
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 {
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; }
select {
-webkit-appearance: none;
/* 1 */
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAHCAYAAADXhRcnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEOEZCMjYxMEYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEOEZCMjYxMUYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ4RkIyNjBFRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ4RkIyNjBGRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Vxkp9gAAAI9JREFUeNpidHFxucHAwKAOxE+AmJmBMPgLxDJAfJMFSKwD4kqoAClgA+P///8ZXF1dPaCGcBKh6QcQB+3evXs7WDMIAA2QB1I7gFgDj0aQFz2BGh+AOEwwUaDAQyBlCMR7cGjcC5KHaQQBuM3IAOiKTiBVhiTUDdRUhq4Oq2aoAelAahIQ5wM1zsCmBiDAADhYMJXVZ9u9AAAAAElFTkSuQmCC);
background-repeat: no-repeat;
background-position: 97.5% center; }
/* ==========================================================================
OTHER PARTS
========================================================================== */
.partsBox {
position: relative;
margin-bottom: 6rem;
padding: 2rem 1rem;
background: #fff;
border-radius: 0 .5rem .5rem .5rem;
}
.partsTab {
display: inline-block;
position: absolute;
padding: 0.2rem 5rem;
bottom: 100%;
left: 0;
background: #fff;
border-bottom: 1px solid #ddd;
border-radius: .5rem .5rem 0 0;
font-size: 18px;
font-weight: 900;
}
/* ======================================================
BOX with TAB
====================================================== */
.tabBox_wrap {
display: flex;
flex-wrap: wrap;
margin: 20px 0;
}
.tabBox_wrap::after {
display: block;
content: '';
width: 100%;
height: 3px;
background: DeepSkyBlue;
order: -1;
}
.tab_label {
position: relative;
flex: 1;
cursor: pointer;
padding: 10px .5em;
background: LightGray;
border-radius: 5px 5px 0 0;
color: White;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
white-space: nowrap;
text-align: center;
order: -1;
z-index: 1;
}
.tab_label:not(:last-of-type) {
margin-right: 5px;
}
.tab_content {
width: 100%;
height: 0;
margin-top: -2px;
overflow: hidden;
opacity: 0;
border-left: 3px solid DeepSkyBlue;
border-right: 3px solid DeepSkyBlue;
border-bottom: 3px solid DeepSkyBlue;
}
.tab_switch:checked+.tab_label {/* アクティブなタブ */
background: DeepSkyBlue;
}
.tab_switch:checked+.tab_label+.tab_content {
height: auto;
overflow: auto;
padding: 15px;
opacity: 1;
transition: .5s opacity;
box-shadow: 0 0 3px rgba(0,0,0,.2);
}
.tab_switch {/* ラジオボタン非表示 */
display: none;
}
/* ======================================================
SEARCH
====================================================== */
.search_container {
position: relative;
display: block;
height: 2.3em;
width: 100%;
padding: 3px 10px;
background: #fff;
border: 2px solid #3879D9;
border-radius: 3px;
box-sizing: border-box;
overflow: hidden;
}
.search_container input[type="text"] {
border: none;
height: 2.0em;
padding: 0;
background-color: #fff;
}
.search_container input[type="text"]:focus {
outline: 0;
}
.search_container input[type="submit"] {
position: absolute;
cursor: pointer;
right:0px;
top: -7px;
width: 2em;
height: 3.0em;
border: none;
background: #3879D9;
outline : none;
font-family: "Font Awesome 5 Free";
color: #fff;
font-weight: bold;
}
/* ==========================================================================
EFFECTS
========================================================================== */
/* ======================================================
FADEIN
====================================================== */
.fadein {
opacity: 0;
transform: translateY(0);
transition: all 1.5s 0s ease-out;
}
.fadein_front {
opacity: 0;
transform: translateY(0);
transition: all 0.7s 0s ease-out;
}
.fadein_B {
opacity: 0;
transform: translateY(20px);
transition: all 1.5s 0s ease-out;
}
.fadein_T {
opacity: 0;
transform: translateY(-20px);
transition: all 1.5s 0s ease-out;
}
.fadein_L {
opacity: 0;
transform: translateX(-20px);
transition: all 1.5s 0s ease-out;
}
.fadein_R {
opacity: 0;
transform: translateX(20px);
transition: all 1.5s 0s ease-out;
}
/* ======================================================
LOADING
====================================================== */
/* Loading背景画面設定 */
#loading {
position: fixed;
width: 100%;
height: 100%;
background: #fff;
color: #fff;
text-align: center;
z-index: 51000;
}
/* Loading画像中央配置 */
#loading_logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Loadingアイコンの大きさ設定 */
#loading_logo img {
width: 260px;
}
/* fadeUpアイコンの動き */
.fadeUp {
animation-name: fadeUpAnime;
animation-duration: .5s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeUpAnime {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==========================================================================
NAVIGATION
========================================================================== */
.header_up nav,
.header_tracking nav {}
.nav_columnBox {
width: calc(100% - 200px);
max-width: 930px;
}
/* ======================================================
BUTTON MENU
====================================================== */
.nav_main {
padding: 0.8rem 0;
}
.induction_btn {
display: flex;
justify-content: space-between;
}
.induction_btn li {
width: 32.5%;
}
.induction_btn li a {
display: block;
position: relative;
width: 100%;
margin: 0 auto;
padding: .8em 0;
background: #999;
border-radius: 0.5rem;
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.24);
font-size:min(10vw,22px);
color: #0E6925;
font-weight: 700;
text-align: center;
transition: 0.3s;
}
.induction_btn li a::before {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
content: "";
vertical-align: middle;
right: 0.1rem;
box-sizing: border-box;
width: .5rem;
height: .5rem;
border: .5rem solid transparent;
border-left: .5rem solid #fff;
}
.induction_btn li a.btn_request { background: #FFA722;}
.induction_btn li a.btn_experience { background: #AACC02;}
.induction_btn li a.btn_application { background: #FFE631;}
.header_up li a{
text-decoration: none;
}
/* ======================================================
DROPDOWN MENU
====================================================== */
.nav_dropdown {
position: relative;
width: 100%;
max-width: 1000px;
margin: 0 auto;
border-top: 1px solid #D3D3D3;
}
.nav_dropdown > li {
float: left;
width: 20%;
padding: .3rem 0;
}
.nav_dropdown > li a {
display: block;
padding: .2rem 0;
border-right: 1px solid #7EBE81;
font-size: min(2.3vw,13px);
color: #5F5F5F;
font-weight: bold;
text-align: center;
/*white-space: nowrap;*/
}
.nav_dropdown > li:last-of-type a { border-right: none;}
.nav_dropdown > li a:hover { color: #999;}
.nav_dropdown > li a span,
.navham_menu li a span {
position: relative;
display: inline-block;
padding: 0 1.3em 0 0;
vertical-align: middle;
text-decoration: none;
}
.nav_dropdown > li a span::before,
.nav_dropdown > li a span::after,
.navham_menu li a span::before,
.navham_menu li a span::after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.nav_dropdown > li a span::before,
.navham_menu li a span::before {
width: 1em;
height: 1em;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #008F42;
}
.nav_dropdown > li a span::after,
.navham_menu li a span::after {
/* right: -1px;*/
box-sizing: border-box;
width: 0.3em;
height: 0.3em;
border: 0.3em solid transparent;
border-left: 0.4em solid #fff;
}
.navdrop_none:hover,
.navdrop_multi:hover,
.navdrop_mega:hover,
.navdrop_single:hover {
-webkit-transition: .2s ease;
transition: .2s ease;
}
.nav_dropdown > li ul li {
padding: 10px .5em;
background: #fff;
color: #999;
}
.hi_lv2 li,
.hi_lv3 li { border-bottom: 1px solid #999;}
.hi_lv2 li:last-of-type,
.hi_lv3 li:last-of-type { border-bottom: none;}
/*.hi_lv2 li a:hover { background: #fff;}
.hi_lv3 li a:hover { background: #fff;}
.hi_lv4 li a:hover { background: #fff;}*/
.arrowB::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
margin: 0 0 0.3em 15px;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav_dropdown::before,
.nav_dropdown::after {
content: "";
display: table;
}
.nav_dropdown:after { clear: both;}
.nav_dropdown { *zoom: 1;}
/* ---------------------------
single menu
--------------------------- */
.nav_dropdown > .navdrop_single {
position: relative;
}
.navdrop_single .hi_lv2 {
position: absolute;
top: 40px;
width: 100%;
/*background: #fff;*/
-webkit-transition: .2s ease;
transition: .2s ease;
visibility: hidden;
opacity: 0;
}
.navdrop_single:hover > .hi_lv2 {
top: 50px;
visibility: visible;
opacity: 1;
}
/* ---------------------------
multi menu
--------------------------- */
.nav_dropdown > .navdrop_multi {
position: relative;
}
.navdrop_multi .hi_lv2 {
position: absolute;
top: 40px;
width: 100%;
/*background: #fff;*/
-webkit-transition: all .2s ease;
transition: all .2s ease;
visibility: hidden;
opacity: 0;
z-index: 1;
}
.navdrop_multi:hover .hi_lv2 {
top: 50px;
visibility: visible;
opacity: 1;
}
.navdrop_multi .hi_lv2 li { position: relative;}
.navdrop_multi .hi_lv2 li:hover { /*background: #fff;*/}
.navdrop_multi .hi_lv2 li .hi_lv3 {
position: absolute;
top: -1px;
left: 100%;
width: 100%;
/*background: #fff;*/
-webkit-transition: all .2s ease;
transition: all .2s ease;
visibility: hidden;
opacity: 0;
}
.navdrop_multi .hi_lv2 li:hover .hi_lv3 {
visibility: visible;
opacity: 1;
}
.navdrop_multi .hi_lv2 li .hi_lv3 li { position: relative;}
.navdrop_multi .hi_lv2 li .hi_lv3 li:hover { /*background: #fff;*/}
.navdrop_multi .hi_lv2 li .hi_lv3 li .hi_lv4 {
position: absolute;
top: -1px;
left: 100%;
width: 100%;
/*background: #fff;*/
-webkit-transition: all .2s ease;
transition: all .2s ease;
visibility: hidden;
opacity: 0;
}
.navdrop_multi .hi_lv2 li .hi_lv3 li:hover .hi_lv4 {
visibility: visible;
opacity: 1;
}
.arrowR { position: relative;}
.arrowR::after {
content: '';
position: absolute;
display: inline-block;
top: 0;
bottom: 0;
right: .5em;
width: 6px;
height: 6px;
margin: auto;
border-right: 1px solid #999;
border-top: 1px solid #999;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* ---------------------------
mega menu
--------------------------- */
.navdrop_mega .hi_lv2 {
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
width: 100%;
padding: 20px 2%;
background: #fff;
-webkit-transition: all .2s ease;
transition: all .2s ease;
visibility: hidden;
opacity: 0;
z-index: 1;
}
.navdrop_mega:hover .hi_lv2 {
top: 50px;
visibility: visible;
opacity: 1;
}
.navdrop_mega .hi_lv2 > li {
float: left;
width: 32%;
border: none;
}
.navdrop_mega .hi_lv2 > li:nth-child(3n+2) { margin: 0 1%;}
/* 追尾メニュー内ドロップダウンメニュー */
.header_tracking .nav_dropdown > li ul li {
padding: 10px .5em;
background: #333;
color: #fff;
}
.header_tracking .navdrop_mega .hi_lv2 { background: #333;}
.header_tracking .hi_lv2 li,
.header_tracking .hi_lv3 li { border-bottom: 1px solid #999;}
.header_tracking .hi_lv2 li:last-of-type,
.header_tracking .hi_lv3 li:last-of-type { border-bottom: none;}
/* ======================================================
HAMBURGER MENU
====================================================== */
.hamburger {
display: none;/**/
position:absolute;
right: 0;
top: -15px;
}
.navham_checkbox {
display: none;
}
.navham_content {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 30%;
min-width: 300px;
transform: translateX(100%);
transition: all 0.5s ease-in-out 0s;
background-color: #fff;
overflow: auto;
-webkit-overflow-scrolling: touch;
z-index: 49000;
}
.navham_menu {
width: 90%;
margin: 1rem auto 0;
}
.navham_menu li a {
display: block;
text-align: center;
font-size:min(4vw,20px);
color: #5F5F5F;
margin-top: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #999;
}
.navham_checkbox:checked ~ .navham_content { transform: translateX(0);}
.navham_icon {
position: absolute;
cursor: pointer;
justify-content: center;
align-items: center;
top: 2rem;
right: 5px;
width: 45px;
height: 45px;
background-color: #fff;
border: 1px solid #008F42;
border-radius: 5px;
z-index: 48000;
}
.navham_icon span,
.navham_icon span:before,
.navham_icon span:after {
content: '';
display: block;
position: absolute;
height: 5px;
width: 35px;
border-radius: 3px;
background-color: #008F42;
transition: all 0.5s ease-in-out 0s;
}
.navham_icon span { top: 20px; right: 5px; margin: auto;}
.navham_icon span::before { bottom: 12px;}
.navham_icon span::after { top: 12px;}
.navham_checkbox:checked ~ .navham_icon {
background-color: transparent;
z-index: 50000;
}
.navham_checkbox:checked ~ .navham_icon span {
position: fixed;
background-color: rgba(255, 255, 255, 0);
right: -0.25rem;
}
.navham_checkbox:checked ~ .navham_icon span::before {
bottom: -5px;
right: 15px;
transform: rotate(-45deg);
background-color: #008F42;
}
.navham_checkbox:checked ~ .navham_icon span::after {
top: 5px;
right: 15px;
transform: rotate(45deg);
background-color: #008F42;
}
.navham_overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
transition: all 0.5s ease-in-out 0s;
z-index: 48500;
/* 本画面スクロール禁止 */
overscroll-behavior: contain;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
touch-action: none;
}
.navham_overlay::before,
.navham_overlay::after {
content: "";
width: 1px;
height: calc(100vh + 1px);
display: flex;
}
.navham_overlay::-webkit-scrollbar { display: none;}
.navham_checkbox:checked ~ .navham_overlay {
display: block;
opacity: 0.5;
}
.header_tracking .navham_icon span,
.header_tracking .navham_icon span:before,
.header_tracking .navham_icon span:after {}
/* ==========================================================================
BREADCLUMB
========================================================================== */
#bread_clumb { display: none;}/**/
/* ==========================================================================
CONTENTS
========================================================================== */
.logo_site {
max-width: 200px;
padding: 1rem 0;
}
.logo_site img {
width: 100%;
max-width: 190px;
height: auto;
vertical-align: initial;
}
/* ======================================================
HEADER STYLES
====================================================== */
header {
position: relative;
width: 100%;
}
.header_up {
position: absolute;
background: #fff;
z-index: 47000;
}
.header_tracking {
position: fixed;
width: 100%;
background: #fff;
top: -100%;/*※ %指定だと表示が少し遅れる ※*/
top: -200px;
transition: .5s;
}
.header_tracking.show { top: 0; box-shadow: 1px -3px 15px 1px rgb(0 0 0 / 20%); z-index: 47000;}
.header_tracking nav li a {
text-decoration: none;
}
.header_inside {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
z-index: 47000;
}
/* ロゴだけ左寄せ
.header_inside h1.logo_site { margin-right: auto;}*/
/* ======================================================
MAIN STYLES
====================================================== */
main {
padding-top: 4rem;
}
main p {
margin-bottom: 0.3em;
line-height: 2.2;
}
.content_box {
width: 1200px;
margin: 0 auto;
}
.ss_attention{
font-size:3rem;
text-align: center;
font-weight:600;
text-shadow: #FC0 1px 0 1px;
}
.ss_attention p{text-decoration: none!important;}
.ss_attention_link{color:blue; text-decoration: underline;}
/* ---------------------------------------
MAP
--------------------------------------- */
.map_box {
max-width: 500px;
}
.map_box iframe {
width: 100%;
aspect-ratio: 16/9;
}
/* ---------------------------------------
CONTETS
--------------------------------------- */
.top_img {
overflow: hidden;
margin-top: 88px;
background: #008F42;
text-align: center;
}
.top_img img {
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* .top_img .single_object {
width: 100%;
height: 600px;
object-fit: cover;
object-position: 50% 50%;
}*/
.w920p,
.w795p,
.w940p { display: block; margin: 0 auto;}
.w920p { max-width: 920px;}
.w795p { max-width: 795px; margin-bottom: 5rem;}
.w940p { max-width: 940px; margin-bottom: 2.5rem;}
/*中身*/
h2.underline {
text-align: center;
margin-bottom: 2.5rem;
}
h2.underline span {
display: inline-block;
padding: 0 0.5em 1rem;
background-image: linear-gradient(90deg, #90CE08 0 33%, #538F00 33% 66%, #90CE08 66%);
background-repeat: no-repeat;
background-size: 100% 5px;
background-position: bottom;
font-size: min(6vw,39px);
color: #008F42;
font-weight: bold;
}
h3.underline {
text-align: center;
margin-bottom: 1.5rem;
}
h3.underline span {
display: inline-block;
margin-bottom: 1.5rem;
padding: 0 2rem .7rem;
border-bottom: 4px solid #90CE08;
font-size: min(5vw,30px);
color: #008F42;
font-weight: bold;
}
.bgorange { text-align: center;}
.bgorange span {
display: inline-block;
margin-bottom: 2rem;
padding: 1rem 2rem;
background: #F28200;
font-size:min(4.5vw,25px);
color: #fff;
}
.flameBk { text-align: center;}
.flameBk span {
display: inline-block;
margin-bottom: 3rem;
padding: 0.9rem 3rem;
border: 1px solid #4D4D4D;
border-radius: 2em;
font-size: min(4.5vw,25px);
color: #4D4D4D;
line-height: 1;
}
.lineBox { text-align: center;}
.lineBox span {
position: relative;
padding: 1.2rem 3.5rem calc(1rem + 10px);
background: #fff;
border: 1px solid #000;
font-size: min(6vw,42px);
}
.lineBox span::before {
position: absolute;
top: -7px;
left: -7px;
width: 100%;
height: 100%;
content: '';
border: 1px solid #000;
}
.txt_BK {
margin-bottom: 1.5rem;
font-size:min(4.5vw,24px);
text-align: center;
}
.lineRoundBk {
}
/*【ボタン】*/
.btn_areaBox {
margin-bottom: 7rem;
padding: 3.5rem 0;
background: #FFFDF2;
}
.btn_areaBox .induction_btn {
max-width: 645px;
margin: 0 auto;
}
.btn_areaBox .induction_btn li { width: 48.4%;}
.btn_areaBox .induction_btn li a {
position: static;
display: flex;
justify-content: center;
padding: 0.95em 0;
font-size: min(4.5vw,27px);
}
.btn_areaBox .induction_btn li a::before { display: none;}
.btn_areaBox .induction_btn li a span {
position: relative;
display: inline-block;
padding: 0 0 0 1.2em;
vertical-align: middle;
}
.btn_areaBox .induction_btn li a span::before,
.btn_areaBox .induction_btn li a span::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.btn_areaBox .induction_btn li a span::before {
width: .85em;
height: .85em;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #fff;
}
.btn_areaBox .induction_btn li a span::after {
left: 0.25em;
box-sizing: border-box;
width: 0.2em;
height: 0.2em;
border: 0.25em solid transparent;
border-left: 0.42em solid #0E6925;
}
body .btn_areaBox:last-of-type { margin-bottom: 0;}
.navham_content .induction_btn {
padding-top: 4rem;
flex-flow: column;
width: 90%;
margin: 0 auto;
}
.navham_content .induction_btn li { width: 100%; margin-bottom: 1vw;}
.navham_content .induction_btn li a {
padding: 1.5rem 0;
font-size: min(4.5vw,22px);
}
.link_txt {
display: inline-block;
color: #0016C1;
}
.link_txt::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f101";
padding: 0.2em;
}
.link_txt:hover { text-decoration: underline;}
.btn_linG {
display: block;
max-width: 480px;
margin: 2.5rem auto 4rem;
padding: 1.2rem 0;
background: #fff;
border: 1px solid #008F42;
border-radius: 2em;
font-size: min(4vw,21px);
text-align: center;
color: #008F42;
font-weight: bold;
filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
}
.video_box.mbB { margin-bottom: 5rem;}
.video_box.mbB2 { margin-bottom: 8rem;}
/*【内容】*/
.video_box {
width: 100%;
max-width: 960px;
margin: 0 auto;
aspect-ratio: 16 / 9;
}
.video_box iframe {
width: 100%;
height: 100%;
}
.fukidashi {
margin-bottom: .8rem;
font-size:min(6vw,37px);
font-weight: bold;
text-align: center;
line-height: 1.6;
}
.fukidashi span {
position: relative;
display: inline-block;
padding: 0 30px;
font-family: "丸フォーク B";
font-size:min(5vw,33px);
color: #FF6200;
}
.fukidashi span::before,
.fukidashi span::after {
position: absolute;
display: inline-block;
content: "";
background: #FF6200;
width: 3px;
height: 3rem;
bottom: 0;
}
.fukidashi span::before{
left: 0;
transform: rotate(-35deg);
}
.fukidashi span::after{
right: 0;
transform: rotate(35deg);
}
.txt_attention {
margin-bottom: 4rem;
font-size:min(3vw,14px);
text-align: center;
}
.info_areaBox {
display: flex;
flex-wrap: wrap;
margin: 2rem 0 5rem;
padding: 2.3rem 0 1.2rem 2.4rem;
background: #FCFFDD;
border-radius: .5rem;
}
.info_areaBox li {
width: 100%;
max-width: 356px;
margin-right: 2.2%;
margin-bottom: 1.2rem;
filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.2));
}
.info_areaBox li a {
display: flex;
align-items: center;
padding: 0.8rem 1rem;
background: #fff;
border: 2.5px solid #069F00;
border-radius: .5rem;
color: #000;
}
.info_areaBox li a span {
position: relative;
display: block;
width: 7.5em;
margin-right: 0.6em;
font-size:min(4vw,19px);
font-weight: bold;
}
.info_areaBox li a span::after {
position: absolute;
content: "▶";
right: 0;
top: 0;
bottom: 0;
margin: auto;
color: #069F00;
}
.info_newsBox,
.info_newsatteBox {
max-width: 840px;
margin: 0 auto 2.7rem;
}
.info_newsBox {}
.date {
position: relative;
display: inline-block;
margin: 0 1.7rem 0 0;
padding: .6rem 1.5rem;
min-width: 7em;
max-width: 100%;
color: #4B8100;
background: #D0E88D;
border-radius: 5px;
font-size: min(4vw,19px);
text-align: center;
}
.date::before {
content: "";
position: absolute;
top: 120%;
left: 45%;
margin-top: -9px;
border: 9px solid transparent;
border-left: 9px solid #D0E88D;
transform: rotate(90deg);
}
.info_newsatteBox {
padding: 2rem 1.5rem;
border: 2px solid #C8E8BD;
border-radius: 6px;
font-size: min(3.5vw,16px);
}
.info_newsatteBox li { padding-bottom: 1.5rem; padding-left: 1em; text-indent: -1em;}
.info_newsatteBox li:last-of-type { padding-bottom: 0;}
.features_box {}
.features_box .ttl {
display: flex;
align-items: center;
margin-bottom: .5em;
font-family: "丸フォーク B";
font-size:min(5vw,34px);
color: #008F42;
}
.features_box .ttl_num {
display: block;
width: 80px;
margin-right: 1em;
padding-top: .4rem;
/*background: #008F42;*/
font-size:min(2.6vw,17px);
color: #fff;
text-align: center;
}
.features_box .ttl_num span {
display: block;
font-size:min(8vw,44px);
line-height: 1.3;
}
.features_box .conte {
line-height: 2;
padding-bottom: 1.7rem;
border-bottom: 1px solid #C7C7C7;
margin-bottom: 1rem;
}
.bgGray {
padding: 4.5rem 0 3rem;
background: #F4F2F2;
}
.study_styleHead {
padding: 2.8rem 0 1.8rem;
font-size:min(4.8vw,31px);
color: #F87D02;
font-weight: bold;
text-align: center;
}
.study_styleBox {
display: flex;
justify-content: space-between;
margin-bottom: 3.5rem;
}
.study_style {
max-width: 47.8%;
padding: 1.4rem 2.3rem 0.7rem;
background: #fff;
border-radius: 0.7em
}
.study_style .ttl01 {
margin-bottom: 0.7rem;
}
.study_style .ttl01 > img { width: 100%;}
.study_style .ttl02 {}
.study_style > p {
margin-bottom: 1.5rem;
line-height: 1.7;
}
.green_head {}
.green_head span {
font-size:min(5vw,31px);
color: #009143;
letter-spacing: 0;
}
.fukidashi.green_head span::before,
.fukidashi.green_head span::after { background: #009143;}
.study_courseBox {
display: flex;
justify-content: space-between;
padding: 1.5rem 0.8rem 1.5rem;
background: #fff;
border-radius: 1em;
}
.study_course {
width: calc(100% / 3);
}
.study_course h4 {
width: calc(93% - 4px);
margin: 0 auto;
padding: 0.7rem 0;
background: #6FA948;
border-radius: .4em;
font-size: min(4.5vw,22px);
color: #fff;
text-align: center;
outline: solid 2px #6FA948;
outline-offset: 1.5px;
}
.study_course .txt {
border-right: 1px solid #C7C7C7;
margin-top: 1rem;
padding: 0.5rem 2rem 0;
}
.study_courseBox .study_course:last-of-type .txt { border-right: none;}
.study_course .txt p {
font-size: min(3.5vw,16px);
line-height: 1.7;
}
.study_course .txt p.detail {
margin-bottom: 1.2rem;
font-size: min(4.5vw,22px);
font-weight: bold;
line-height: 1.5;
white-space: nowrap;
}
.study_attention {
font-size:min(3.1vw,14px);
text-align: right;
}
.voice_linkBox {
display: flex;
justify-content: space-between;
max-width: 960px;
margin: 3.5rem auto 6.5rem;
}
.voice_linkBox li {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 29.5%;
margin: 0;
padding: .2rem 0 .5rem;
max-width: 100%;
background: #fff;
border: 3px solid #6FA948;
border-radius: 1em;
font-size:min(3vw,21px);
color: #000;
font-weight: bold;
text-align: center;
}
.voice_linkBox li::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -2.5rem;
border: 2.5rem solid transparent;
border-top: 1.2rem solid #6FA948;
}
.voice_linkBox li a {
color: #000;
line-height: 1.5;
}
.voice_linkBox li .icon_voice {
display: inline-block;
background: #008F42;
font-size: min(2.5vw,17px);
padding: 0 1.3rem;
margin-bottom: 0.2rem;
color: #fff;
}
.voice_list {}
.voice_list li {
display: flex;
align-items: flex-start;
width: 100%;
margin-bottom: 1.1rem;
}
.voice_list li .photo {
width: 146px;
height: 146px;
}
.voice_list li:nth-child(odd) .photo { background: #FFFBCE;}
.voice_list li:nth-child(even) .photo { background: #DEF5D4;}
.voice_list li .photo img {
display: block;
width: 95%;
margin: 4% auto 0;
}
.voice_list li > p {
width: calc(100% - 146px);
padding: 0.7rem 0 0.7rem 1.5em;
font-size: min(3.5vw,16px);
line-height: 1.6;
}
.red {
color: red;
font-weight: 900;
}
.voice_area .underline { margin-bottom: 1rem;}
.voice_area .content_box > p { margin-bottom: 1.1rem; text-align: center;}
.readmore{
position: relative;
box-sizing: border-box;
margin-bottom: 5rem;
}
.readmore-content {
position: relative;
overflow: hidden;
/*高さの初期値*/
height: 490px;
}
.readmore-content::before {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
content: "";
/*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
height: 50px;
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
}
/* 続きを読むボタン */
.readmore-label {
position: absolute;
display: table;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
margin: 0 auto;
padding: 1rem 2.5rem;
background-color: #fff;
border-radius: 2em;
border: 1px solid #089247;
filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
font-size: min(3.5vw,16px);
color: #089247;
font-weight: 900;
text-align: center;
z-index: 2;
}
.readmore-label:before{
content: '受講した方の声をもっと読む ▼';
}
.readmore-check{
display: none;
}
/*チェック時にボタンを非表示*/
.readmore-check:checked ~ .readmore-label{
position: static;
transform: translateX(0);
-webkit-transform: translateX(0);
/* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
/* display: none; */
}
.readmore-check:checked ~ .readmore-label:before{
content: '閉じる ▲';
}
/*チェック時に高さを自動に戻す*/
.readmore-check:checked ~ .readmore-content{
height: auto;
}
/*チェック時グラデーション等を削除*/
.readmore-check:checked ~ .readmore-content::before {
display: none;
}
.teacher_box {
display: flex;
justify-content: space-between;
margin-bottom: 3.5rem;
}
.teacher_info {
width: 48.7%;
padding: 1.3rem;
border: 1px solid #5D5D5D;
}
.teacher_top {
display: flex;
}
.teacher_top .photo {
width: 42%;
filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2));
}
.teacher_top .overview {
width: calc(100% - 42%);
padding-left: 1rem;
}
.teacher_top .overview .catch {
padding: 0.3rem 0;
font-family: "丸フォーク B";
font-size:min(5.3vw,29px);
color: #FF6C00;
line-height: 1.4;
}
.teacher_top .overview .name {
font-size:min(6vw,27px);
font-weight: bold;
line-height: 1.8;
}
.teacher_top .overview .name span {
font-size:min(3vw,14px);
font-weight: 400;
}
.teacher_top .overview .license {
font-size:min(3.3vw,17px);
line-height: 1.9;
}
.teacher_info > p {
padding: 0.8rem 0 0;
font-size:min(3.5vw,16px);
line-height: 1.7;
}
.sche_attention {
padding: 0.2rem 0 5.5rem;
font-size:min(3vw,14px);
}
.sche_wrap { max-width: 1050px; margin: 0 auto;}
.sche_testBox {
display: flex;
justify-content: space-between;
}
.sche_testList {
width: 47%;
padding: 0.5rem 1.3rem;
background: #FFFCE4;
filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
}
.sche_testList > p {
padding-left: 3rem;
}
.sche_testList .month {
border-bottom: 1px solid #BCBCBC;
font-size:min(4vw,25px);
color: #019044;
font-weight: bold;
}
.sche_testList .kind {
padding-top: 0.7rem;
padding-bottom: 0.5rem;
line-height: 2rem;
}
.sche_attentionT {
/*text-align: right;*/
font-size: min(3vw,16px);
margin: 0.5rem 0 3rem;
}
.sche_systemBox {}
.sche_systemBox h3 {
display: inline-block;
margin-bottom: 0.5rem;
padding: 0.6rem 1.6rem;
background: #008F42;
font-size: min(3.8vw,17px);
color: #fff;
letter-spacing: .15em;
}
.sche_systemBox > p {
margin: 0.5rem 0 1.2rem;
line-height: 1.7;
}
.sche_systemCourse {
padding: 1.2rem 1.5rem;
border: 1px solid #90CE08;
border-radius: 0.5rem;
}
.sche_systemCourse li { line-height: 1.8;}
.courseoverview_box {
display: flex;
flex-wrap: wrap;
border: 2px solid #008001;
}
.courseoverview_box > li {
padding: 1.7rem 2rem;
line-height: 1.7;
}
.courseoverview_box > li.ttl {
width: 22%;
background: #F6F6F6;
border-right: 2px solid #CCCCCC;
border-bottom: 2px solid #CCCCCC;
font-size:min(3.8vw,19px);
font-weight: bold;
}
.courseoverview_box > li.conte {
width: 78%;
background: #FFFFFF;
border-bottom: 2px solid #CCCCCC;
font-size:min(3.4vw,17px);
}
.courseoverview_box > li:last-of-type,
.courseoverview_box > li:nth-last-child(2) { border-bottom: none;}
.courseoverview_box > li.ttl.green { background: #C1E1D0; color: #01612E;}
.courseoverview_box > li.conte.green { background: #E8F6ED;}
.txtS { font-size:min(3.2vw,15px);}
.txtS.indent { display: inline-block; padding-left: 1em; text-indent: -1em;}
.table_txt {}
.table_txt li {
padding-left: 1em;
text-indent: -1em;
}
.operating_ttl {
display: block;
margin: 2rem 0 .7rem;
font-size:min(3.4vw,17px);
font-weight: bold;
}
.table_simple {
display: flex;
flex-wrap: wrap;
margin-bottom: 1rem;
background: #fff;
border: 4px solid #32B132;
}
.table_simple > li {
padding: 1.2rem 2rem;
border-bottom: 1px solid #707070;
}
.table_simple > li:nth-of-type(odd) { width: 30%; border-right: 1px solid #707070;}
.table_simple > li:nth-of-type(even) { width: 70%;}
.table_simple > li:last-of-type,
.table_simple > li:nth-last-child(2) { border-bottom: none;}
.table_simple.column1 { margin-bottom: 1.5rem;}
.table_simple.column1 > li { width: 100%;}
.table_simple.column1 > li:first-of-type { border-bottom: 1px solid #707070;}
.table_simple ul { margin: 1rem 0 .3rem;}
.table_simple .table_txt li {
padding-left: 2.3em;
text-indent: -2.3em;
}
.venue_listBox {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.venue_listBox li {
width: 24%;
margin-right: 1%;
margin-bottom: .8rem;
padding: 0.7rem;
background-color: #E7EEE8;
border-radius: .5rem;
font-size:min(3.2vw,16.5px);
color: #333;
}
.link_place {
position: relative;
display: block;
margin-bottom: 0.8rem;
padding: 0.8rem;
background: #FF8000;
border-radius: 0.5rem;
font-size:min(3.6vw,16px);
color: #fff;
font-weight: bold;
letter-spacing: .1em;
vertical-align: middle;
}
.link_place::before {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
content: "";
vertical-align: middle;
right: 0.8rem;
width: 0.7rem;
height: 0.7rem;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.venue_listBox li > span {
display: block;
height: 3.2em;
line-height: 1.5;
}
.link_briefingses {
display: block;
margin-top: 10px;
padding: 0.7em 0;
background-color: #007E37;
border-radius: 0.3rem;
font-size: min(2.5vw,14px);
color: #F6FA33;
text-align: center;
letter-spacing: .05em;
}
/* ======================================================
PAGE TOP
====================================================== */
#page_top {
width: 90px;
height: 90px;
position: fixed;
right: 10px;
bottom: 10px;
background: #ef3f98;
opacity: 0.6;
border-radius: 50%;
z-index: 11;
}
#page_top a{
position: relative;
display: block;
width: 90px;
height: 90px;
text-decoration: none;
}
#page_top a::before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f102';
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;
top: -40px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}
#page_top a::after{
content: 'TOP';
font-size: 13px;
color: #fff;
position: absolute;
top: 45px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}
/* ======================================================
FOOTER STYLES
====================================================== */
.footer {
padding: 3.5rem 0 1rem;
background: #316732;
color: #fff;
z-index: 10;
}
#footer_inner {
width: 95%;
max-width: 1050px;
margin: 0 auto;
padding: 0 1rem;
text-align: center;
}
#footer_inner .logo_site { max-width: 260px; margin: 0 auto 2rem;}
#footer_inner .logo_site img { width: 100%;}
#footer_inner > p {
margin-bottom: 4rem;
font-size:min(3vw,16px);
line-height: 1.8;
}
.footer_column { /*左右カラムナビ*/
margin: 1rem 0 2rem;
}
.footer_infoBox {
width: 50%;
font-size: 12px;
}
.nav_footerBox {}
/*.footer_column .footer_nav {
display: flex;
justify-content: center;
margin: 1rem 0 2rem;
}
.footer_column .footer_nav a {
padding-left: 1rem;
font-size: 12px;
}*/
/* ---------------------------------------
NAV FOOTER
--------------------------------------- */
.nav_f_head {
padding: 0 0 1em ;
font-size: 13px;
}
.nav_footer {}
.nav_footer li {
padding: 1em 0;
font-size: 13px;
}
.nav_footer a {
display: inline-block;
font-size: 14px;
color: #fff;
}
.nav_footer a:hover { color: blue;}
/*横幅100%ナビ*/
.nav_footer.wide {
display: flex;
justify-content: center;
margin: 1rem 0 2rem;
}
.nav_footer.wide a {
padding: 0 1rem;
}
/* ---------------------------------------
INFO FOOTER
--------------------------------------- */
footer .logo_site {
margin-bottom: 0.5rem;
}
footer .logo_site img {
width: 160px;
height: auto;
/*margin-bottom: 0.5rem;*/
}
.catchicopy {
margin-bottom: 1rem;
}
.com_address {}
.com_address ul {}
.com_address li { margin-bottom: 1.5rem;}
.com_address li.com_distinction { width: 5.3em;}
.com_address li.com_distinction span {
display: inline-block;
padding: 0.5rem 0.4rem 0.5rem 0.6rem;
border: 1px solid #fff;
border-radius: 5px;
font-size: 11px;
text-align: center;
letter-spacing: 3px;
}
.com_address li.com_address {
width: calc(100% - 5.3em);
font-size: 12px;
line-height: 1.7;
}
footer .map_box {
width: 60%;
margin-bottom: 1.5rem;
}
.copywrite {
font-size: min(2.5vw,12px);
text-align: center;
}
@media screen and (max-width: 960px) {
.hamburger { display: block;}
.nav_columnBox { display: none;}
}
@media screen and (max-width: 820px) {
/* ==========================================================================
Base
========================================================================== */
.only_pc {display: none!important;}
.only_tab {display: inline-block!important;}
.only_smp {display: none!important;}
/* ==========================================================================
Links
========================================================================== */
/* ==========================================================================
TYPOGRAPHY
========================================================================== */
/* ======================================================
H1, H2, H3, H4, H5 STYLES
====================================================== */
/* ==========================================================================
LISTS
========================================================================== */
/* ==========================================================================
IMAGES
========================================================================== */
/* ======================================================
BUTTONS
====================================================== */
/* ==========================================================================
FLEX
========================================================================== */
/* ==========================================================================
FORMS
========================================================================== */
/* ==========================================================================
TABLES
========================================================================== */
/* ==========================================================================
INPUTS
========================================================================== */
/* ==========================================================================
NAVIGATION
========================================================================== */
.dropdown {
display: none;
}
/* ==========================================================================
BREADCLUMB
========================================================================== */
/* ==========================================================================
CONTENTS
========================================================================== */
/* ======================================================
HEADER STYLES
====================================================== */
/* ======================================================
MAIN STYLES
====================================================== */
/* ---------------------------------------
TOP PAGE
---------------------------------------- */
/* ======================================================
PAGE TOP
====================================================== */
/* ======================================================
FOOTER STYLES
====================================================== */
}
@media screen and (max-width: 620px) {
/* ==========================================================================
Base
========================================================================== */
.only_pc {display: none!important;}
.only_tab {display: none!important;}
.only_smp {display: inline-block!important;}
/* ==========================================================================
Links
========================================================================== */
/* ==========================================================================
TYPOGRAPHY
========================================================================== */
/* ======================================================
H1, H2, H3, H4, H5 STYLES
====================================================== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { letter-spacing: 0;}
/* ==========================================================================
LISTS
========================================================================== */
/* ==========================================================================
IMAGES
========================================================================== */
/* ======================================================
BUTTONS
====================================================== */
/* ==========================================================================
FLEX
========================================================================== */
/* ==========================================================================
FORMS
========================================================================== */
/* ==========================================================================
TABLES
========================================================================== */
/* ==========================================================================
INPUTS
========================================================================== */
/* ==========================================================================
NAVIGATION
========================================================================== */
.navham_icon { top: 1.2rem;}
.navham_content .induction_btn li { margin-bottom: 4vw;}
.navham_content .induction_btn li a { padding: 5vw 0;}
.navham_menu li a { margin-top: 3.5vw; padding-bottom: 3.5vw;}
.navham_content { width: 90%;}
.hamburger { top: -4vw;}
/* ==========================================================================
BREADCLUMB
========================================================================== */
/* ==========================================================================
CONTENTS
========================================================================== */
/* ======================================================
HEADER STYLES
====================================================== */
.logo_site { max-width: 40%; padding: 2vw 0;}
/* ======================================================
MAIN STYLES
====================================================== */
main { padding-top: 3vw;}
main p { margin-bottom: 3vw; line-height: 2;}
section { margin: 0 auto 14vw;}
.w795p { margin-bottom: 8vw;}
.top_img { margin-top: 10vw;}
.content_box { width: 92%; margin: 0 auto;}
.ss_attention{font-size:1.8rem;}
.ss_attention p{line-height:1.7rem;}
h2.underline { margin-bottom: 5vw;}
h2.underline span { padding: 0 4vw 3.5vw;}
h3.underline { margin-bottom: 5vw;}
h3.underline span { margin-bottom: 1vw; padding: 0 3vw 2vw;}
.study_courseBox,
.study_styleBox,
.teacher_box,
.sche_testBox { flex-flow: column;}
.fukidashi { margin-bottom: 1vw;line-height: 1.4;}
.fukidashi span { padding: 0 1rem;}
.fukidashi span::before, .fukidashi span::after { width: 2px; height: 2rem;}
.txt_attention { margin-bottom: 9vw;}
.bgorange span { margin-bottom: 4vw; padding: 2vw 3vw; line-height: 1.2;}
.info_areaBox { margin: 5vw 0 10vw; padding: 6vw 5vw;}
.date { position: relative; display: block; max-width: 50%; margin: 0 auto 4vw; padding: 2vw 1.5rem;}
.date::before { top: 120%; left: 45%; transform: rotate(90deg);}
.info_newsBox, .info_newsatteBox { margin: 0 auto 4vw;}
.info_newsatteBox { padding: 5vw;}
.info_newsatteBox li { padding-bottom: 4vw;}
.btn_areaBox { margin-bottom: 10vw; padding: 7vw 0 3vw;}
.btn_areaBox .induction_btn { display: flex; flex-flow: column; max-width: 80%;}
.btn_areaBox .induction_btn li { width: 100%;}
.btn_areaBox .induction_btn li a { padding: 4vw 0; margin-bottom: 4vw;}
.flameBk span { margin-bottom: 6vw; padding: 2.5vw 7vw;}
.features_box .ttl { margin-bottom: 2vw; line-height: 1.1;}
.features_box .ttl_num { width: 18vw; min-width: 18vw; margin-right: 3vw; padding-top: 1vw;}
.features_box .conte { padding-bottom: 4vw;}
.lineBox span { padding: 4vw 14vw calc(2vw + 10px);}
.bgGray { padding: 14vw 0 2vw;}
.study_styleBox { margin-bottom: 8vw;}
.study_styleHead { padding: 9vw 0 2vw;}
.study_style { max-width: 100%; margin-bottom: 3vw; padding: 2vw 5vw 1vw;}
.study_courseBox { padding: 6vw 4vw 0vw;}
.study_course { width: 100%;}
.study_course h4 { padding: 0.5rem 0;}
.study_course .txt { margin-top: 2vw; margin-bottom: 5vw; padding: 1vw 4vw; border-bottom: 1px solid #C7C7C7; border-right: none;}
.study_course .txt:last-of-type { border-bottom: none;}
.study_course .txt p.detail { margin-bottom: 1vw; white-space: normal;}
.voice_linkBox { margin: 7vw auto 11vw;}
.voice_linkBox li { width: 32%; padding: 0.2rem 0 0.5rem; border: 2px solid #6FA948;}
.voice_linkBox li::before { margin-left: -1.5rem; border: 1.5rem solid transparent; border-top: 0.8rem solid #6FA948;}
.voice_area .content_box > p { margin-bottom: 2vw;}
.btn_linG { width: 90%; margin: 7vw auto 9vw; padding: 3vw 0;}
.voice_list li .photo { width: 20%; height: auto;}
.voice_list li > p { width: 80%; padding: 1vw 0 1vw 4vw;}
.readmore { margin-bottom: 11vw;}
.readmore-label { width: 80%; padding: 2vw 6vw;}
.readmore-content { height: 96vw;}
.video_box.mbB2 { margin-bottom: 18vw;}
.teacher_box { margin-bottom: 6vw;}
.teacher_info { width: 100%; margin-bottom: 3vw; padding: 4vw 4vw 2vw;}
.teacher_top .photo { width: 30%;}
.teacher_top .overview { width: calc(100% - 30%); padding-left: 5%;}
.teacher_top .overview .catch { padding: 0; margin-bottom: 1vw;}
.teacher_top .overview .name { margin-bottom: 0vw;}
.teacher_info > p { padding: 0;}
.sche_attention { padding: 0.2rem 0 8vw;}
.sche_testList { width: 100%; margin-bottom: 4vw; padding: 1vw 4vw;}
.sche_testList > p { padding-left: 4vw;}
.sche_attentionT { margin: 0 0 8vw; line-height: 1.5;}
.sche_systemCourse { padding: 3vw 5vw;}
.sche_systemCourse li { padding-left: 1em; text-indent: -1em;}
.courseoverview_box > li { width: 100%!important; padding: 2vw 6vw;}
.courseoverview_box > li.ttl { border-right: none;}
.courseoverview_box > li.conte { padding: 5vw 6vw;}
.table_simple { border: 3px solid #32B132;}
.table_simple > li { padding: 1vw 2vw;}
.table_simple > li:nth-of-type(odd) { width: 34%;}
.table_simple > li:nth-of-type(even) { width: 66%;}
.operating_ttl { margin: 5vw 0 0.3vw;}
.table_simple.column1 > li { width: 100%;}
.table_simple.column1 > li:first-of-type { border-right: none;}
.venue_listBox { justify-content: space-between;}
.venue_listBox li { width: 48.5%; margin-right: 0; margin-bottom: 3vw; padding: 2vw;}
.link_place { margin-bottom: 2vw; padding: 2vw 3vw;}
.link_place::before { right: 0.5rem; width: 0.4rem; height: 0.4rem;}
.venue_listBox li > span { height: 4em; line-height: 1.4;}
#footer_inner .logo_site { margin: 0 auto 3vw;}
/* ======================================================
PAGE TOP
====================================================== */
/* ======================================================
FOOTER STYLES
====================================================== */
.footer { padding: 5vw 0 3vw;}
#footer_inner > p { margin-bottom: 6vw;}
}