/* === reset.css === */ /*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */ /* Reset box-model and set borders */ /* ============================================ */ *, ::before, ::after { box-sizing: border-box; border-style: solid; border-width: 0; } /* Document */ /* ============================================ */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. * 3. Remove gray overlay on links for iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -webkit-tap-highlight-color: transparent; /* 3*/ } /* Sections */ /* ============================================ */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /* Vertical rhythm */ /* ============================================ */ p, table, blockquote, address, pre, iframe, form, figure, dl { margin: 0; } /* Headings */ /* ============================================ */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; } /* Lists (enumeration) */ /* ============================================ */ ul, ol { margin: 0; padding: 0; list-style: none; } /* Lists (definition) */ /* ============================================ */ dt { font-weight: bold; } dd { margin-left: 0; } /* Grouping content */ /* ============================================ */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ border-top-width: 1px; margin: 0; clear: both; color: inherit; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: inherit; /* 2 */ } address { font-style: inherit; } /* Text-level semantics */ /* ============================================ */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; text-decoration: none; color: inherit; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: inherit; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Replaced content */ /* ============================================ */ /** * Prevent vertical alignment issues. */ svg, img, embed, object, iframe { vertical-align: bottom; } /* Forms */ /* ============================================ */ /** * Reset form fields to make them styleable. * 1. Make form elements stylable across systems iOS especially. * 2. Inherit text-transform from parent. */ button, input, optgroup, select, textarea { -webkit-appearance: none; /* 1 */ appearance: none; vertical-align: middle; color: inherit; font: inherit; background: transparent; padding: 0; margin: 0; border-radius: 0; text-align: inherit; text-transform: inherit; /* 2 */ } /** * Correct cursors for clickable elements. */ button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer; } button:disabled, [type="button"]:disabled, [type="reset"]:disabled, [type="submit"]:disabled { cursor: default; } /** * Improve outlines for Firefox and unify style with input elements & buttons. */ :-moz-focusring { outline: auto; } select:disabled { opacity: inherit; } /** * Remove padding */ option { padding: 0; } /** * Reset to invisible */ fieldset { margin: 0; padding: 0; min-width: 0; } legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * Correct the outline style in Safari. */ [type="search"] { outline-offset: -2px; /* 1 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Fix font inheritance. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /** * Fix appearance for Firefox */ [type="number"] { -moz-appearance: textfield; } /** * Clickable labels */ label[for] { cursor: pointer; } /* Interactive */ /* ============================================ */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* * Remove outline for editable content. */ [contenteditable]:focus { outline: auto; } /* Tables */ /* ============================================ */ /** 1. Correct table border color inheritance in all Chrome and Safari. */ table { border-color: inherit; /* 1 */ border-collapse: collapse; } caption { text-align: left; } td, th { vertical-align: top; padding: 0; } th { text-align: left; font-weight: bold; } /* === design-plus.css === */ @charset "UTF-8"; /* ----------------------- TCD Advanced Style -------------------------- */ @font-face { font-family: 'design_plus'; src: url('../fonts/design_plus.eot?v=1.2'); src: url('../fonts/design_plus.eot?v=1.2#iefix') format('embedded-opentype'), url('../fonts/design_plus.woff?v=1.2') format('woff'), url('../fonts/design_plus.ttf?v=1.2') format('truetype'), url('../fonts/design_plus.svg?v=1.2#design_plus') format('svg'); font-weight: normal; font-style: normal; } /* ---------------------------------------------------------------------- Column layout - JCAEg ---------------------------------------------------------------------- */ .post_content .post_row { margin-left:-15px; margin-right:-15px; line-height:2; } .post_content .post_col, .post_content .post_col-2, .post_content .post_col-3 { position:relative; min-height:1px; width:100%; padding-right:15px; padding-left:15px; float:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; margin-bottom:2em; } @media screen and (min-width:768px){ .post_content .post_col-2 { width:50%; /* 2J */ } .post_content .post_col-3 { width:33.33333%; } } @media screen and (min-width:1024px){ .post_content .post_col-2 { width:50%; /* 2J */ } .post_content .post_col-3 { width:33.33333%; } } .post_content .post_row:before, .post_content .post_row:after { content: " "; display: table; } .post_content .post_row:after { clear: both; } /* ---------------------------------------------------------------------- headline - õX^C ---------------------------------------------------------------------- */ .post_content .style3a, .post_content .style3b, .post_content .style4a, .post_content .style4b, .post_content .style5a, .post_content .style5b, .post_content .style6 { line-height:1.6; } /* h3 */ .post_content .style3a { margin:3em 0 1.5em; padding:1.1em .2em 1em; font-size:22px; font-weight:400; border-top:1px solid #222; border-bottom:1px solid #222; } .post_content .style3b { margin:3em 0 1.5em; padding:1.1em .9em 1em; font-size:22px; font-weight:400; border-top:2px solid #222; border-bottom:1px solid #ddd; background:#fafafa; box-shadow:0px 1px 2px #f7f7f7; } /* h4 */ .post_content .style4a { margin:2.5em 2px 1.2em; padding:.3em 0 .3em .8em; font-size:18px; font-weight:400; border-bottom:none; border-left:2px solid #222; } .post_content .style4b { margin:2.5em 0 1.2em; padding:.9em 0 .8em; font-size:18px; font-weight:400; border-bottom:1px dotted #aaa; } /* h5 */ .post_content .style5a { margin:2em 0 1em; padding:.5em .8em .3em 1em; font-weight:700; font-size:18px; background:#f5f5f5; box-shadow:0px 2px 0px 0px #f2f2f2; } .post_content .style5b { margin:2em 0 1em; padding:.5em .8em .4em 1em; font-weight:400; font-size:18px; color:#fff; background:#222; border-radius:4px; box-shadow:0px 2px 0px 0px #f2f2f2; } /* h6 */ .post_content .style6 { position:relative; margin:2em 0 1em; padding:.5em .8em .8em 1.3em; color:#222; font-weight:bold; font-size:16px; } .post_content .style6:before { position:absolute; width:12px; height:12px; top:.5em; left:.2em; background:#222; content:""; } .post_content .news_headline1{ position:relative; margin:80px 0 25px 0; padding:.5em; border-left:8px solid #444; line-height:1.2; font-size:1.2em; } .post_content .news_headline1:after { content:""; position:absolute; bottom:0px; left:0; height:0; width:100%; border-bottom:1px dotted #ddd; } .post_content .news_headline2{ margin:40px 0 20px 0; padding:0 .5em; border-left:6px solid #545454; line-height:26px; font-size:1.1em;} .post_content .balloon { clear:both; display:block; position:relative; margin:50px 0 22px; padding:.5em 18px .5em; width:auto; min-width:115px; color:#fff; text-align:left; font-size:20px; font-weight:400; background:#222; z-index:0; border-bottom:0; } .post_content .balloon:after { content:""; position:absolute; bottom:-10px; left:30px; margin-left:-10px; display:block; width:0px; height:0px; border-style:solid; border-width:10px 10px 0 10px; border-color:#222 transparent transparent transparent; } /* ---------------------------------------------------------------------- flame - ͂ݘg ---------------------------------------------------------------------- */ .well { min-height:20px; padding:19px; margin-bottom:20px; background-color:#f5f5f5; border:1px solid #e3e3e3; border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05); box-shadow:inset 0 1px 1px rgba(0,0,0,0.05); } .well2 { margin:1em 0 30px; padding:1em 1.5em; line-height:2; border:1px solid #cdcdcd; background:#fcfcfc; box-shadow: 0 1px 3px 0 rgba(195,195,195,0.3); } .well3 { margin:2em 0 2.5em; padding:1em 1.5em;line-height:2.0; border:1px dashed #cdcdcd; background:#fcfcfc; box-shadow: 0 1px 3px 0 rgba(195,195,195,0.3); } .wl_red { background-color: #f2dede; border-color: #ebccd1; color: #a94442; } .wl_yellow { background-color: #fcf8e3; border-color: #faebcc; color: #8a6d3b; } .wl_blue { background-color: #d9edf7; border-color: #bce8f1; color: #31708f; } .wl_green { background-color: #dff0d8; border-color: #d6e9c6; color: #3c763d; } /* ---------------------------------------------------------------------- button - CSS{^̃X^C ---------------------------------------------------------------------- */ .q_button { min-width:200px; max-width:90%; background-color:#535353; display:inline-block; vertical-align:middle; padding:.6em 1.3em .5em; font-weight:400; font-size:100%; color:#fff !important; margin:0; text-decoration:none; text-align:center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; transition:all 0.3s ease-in-out 0s; box-shadow:0 1px 3px rgba(0,0,0,.15); } .q_button:hover, .q_button:focus { text-decoration:none !important; color:#fff; background-color:#7d7d7d; box-shadow:0 2px 2px rgba(0,0,0,.15) inset; } /* Button option */ .rounded { border-radius:6px; } .pill { border-radius:50px; } .sz_full { min-width:100px; max-width:100%; display:block; font-size:110%; padding:1em 1.5em .9em; } .sz_l { min-width:350px; max-width:90%; font-size:110%; padding:.8em 1.5em .7em; } @media screen and (max-width: 479px) { .sz_l { min-width:320px; max-width:95%; } } .sz_s { min-width:100px; max-width:90%; font-size:85%; padding:.4em 1em .3em; } .bt_red{ background:#c01f0e; color:#fff; } .bt_red:hover, .bt_red:focus { background-color:#d33929; color:#fff; } .bt_yellow{ background:#f1c40f; color:#fff; } .bt_yellow:hover, .bt_yellow:focus { background-color:#f9d441; color:#fff; } .bt_blue{ background:#2980b9; color:#fff; } .bt_blue:hover, .bt_blue:focus { background-color:#3a91c9; color:#fff; } .bt_green{ background:#27ae60; color:#fff; } .bt_green:hover, .bt_green:focus { background-color:#39c574; color:#fff; } /* Style for orion */ .bt_orion { background:#ccc; color:#fff; text-decoration:none; display:inline-block; margin:0; padding:0 30px; max-width:300px; height:50px; line-height:50px; text-align:center; font-size:14px; } .bt_orion:hover { text-decoration:none; color:#fff; } .bt_orion:after { font-family:'design_plus'; content:'\e910'; font-size:17px; color:#fff; display:inline-block; padding-left:10px; position:relative; top:2px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------------------------------------------------------------------- Youtube responsive - YoutubẽX|Vu\ ---------------------------------------------------------------------- */ .ytube { position:relative; height:0; margin-top:20px; margin-bottom:20px; padding-bottom:56.25%; padding-top:30px; overflow:hidden; } .ytube iframe { position:absolute; top:0; right:0; width:100% !important; height:100% !important; } /* ---------------------------------------------------------------------- Table responsive - e[ũX|Vu\ ---------------------------------------------------------------------- */ .rps_table { line-height:2.0; } @media only screen and (max-width:480px) { .rps_table tr { display:block; margin-bottom:1.5em; } .rps_table th, .rps_table td{ display:list-item; list-style-type:none; border:none; } } /* ---------------------------------------------------------------------- Cardlink style - J[hÑX^C ---------------------------------------------------------------------- */ .cardlink { padding:12px 12px 12px 12px; margin:10px 0; border:1px solid #ddd; word-wrap:break-word; max-width:100%; background:#fafafa; } .cardlink_thumbnail { float:left; margin-right:20px; } .cardlink_content { line-height:1.6; } .cardlink .timestamp { display-inline; margin:0; padding:0; vertical-align:top; color:#666; line-height:1.6; font-size:12px; } .cardlink .timestamp:before { font-family:'design_plus'; content:'\e94e'; font-size:12px; color:#222; display:block; float:left; margin:0 8px 0 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cardlink_title { font-size:16px; margin:0 0 5px; } .cardlink_title a { font-weight:bold; color:#000; text-decoration:none; } .cardlink_title a:hover { text-decoration:underline; } .cardlink_excerpt { color:#333; font-size:13px; overflow:hidden; line-height:1.8; } .cardlink_footer { clear:both; } .clear { clear:both; } @media screen and (max-width: 767px) { .cardlink_thumbnail { float:none; } } @media screen and (max-width: 479px) { .cardlink_excerpt { float:none; } } /* ---------------------------------------------------------------------- Contactform - ₢킹tH[ ---------------------------------------------------------------------- */ .wpcf7 { width:100%; border:1px solid #ddd; background:#fafafa; padding:0; margin:0 0 2.5em !important; font-size:14px;} .wpcf7 form{ margin:1.5em 1.5em 0;} .wpcf7 p { margin-bottom:1em; font-size:12px; } .wpcf7 input, .wpcf7 textarea { width:auto; -moz-box-sizing: border-box; box-sizing: border-box; width:100%; border:1px solid #ccc; line-height:1.2; padding:8px; } .wpcf7 select, .wpcf7 input[type=checkbox], .wpcf7 input[type=radio] { width:auto; max-width:97%; border:1px solid #ccc; padding:8px; } .wpcf7 select, .wpcf7 .wpcf7-list-item-label { line-height:1.2; font-size:14px; } .wpcf7-list-item { display:block; } .wpcf7 textarea { height:300px; } .wpcf7 input:focus, .wpcf7 textarea:focus { outline:none; border:1px solid #bbb; -webkit-box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2); box-shadow:inner 0 0 5px rgba(0, 0, 0, 0.5); } .wpcf7 input.wpcf7-submit, .wpcf7 .wpcf7-previous { position:relative; display:block; width:225px; height:48px; margin:30px auto 0; background-color:#333333; cursor:pointer; border:none !important; color:#fff; text-align:center; text-decoration:none; font-size:14px; line-height:1.5; outline:none; -webkit-transition: all .3s; transition: all .3s; } .wpcf7 input.wpcf7-submit, .wpcf7 input.wpcf7-submit::before, .wpcf7 input.wpcf7-submit::after { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .wpcf7 input.wpcf7-submit:hover, .wpcf7 .wpcf7-previous:hover { background-color:#666666; } .wpcf7 .wpcf7-not-valid { background:pink; } .wpcf7 .wpcf7-response-output { margin:10px 0 0; padding:8px 35px 8px 14px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .wpcf7 .wpcf7-validation-errors { color:#B94A48; background-color:#F2DEDE; border:1px solid #EED3D7; } .wpcf7 .wpcf7-mail-sent-ok { color:#3A87AD; background-color:#D9EDF7; border:1px solid #BCE8F1; } .wpcf7 .wpcf7-previous + br { display: none; } .wpcf7 form .wpcf7-response-output{ margin: 2em 0.5em 2em; padding:0; border: none; text-align:center; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output{ color:#dc3232; font-size: 1em; } /* ---------------------------------------------------------------------- font-size - tHgTCY ---------------------------------------------------------------------- */ .text70{font-size:70%} /* tHgTCY70% */ .text80{font-size:80%} .text90{font-size:90%} .text100{font-size:100%} .text110{font-size:110%} .text120{font-size:120%} .text130{font-size:130%} .text140{font-size:140%} .text150{font-size:150%} .text160{font-size:160%} .text170{font-size:170%} .text180{font-size:180%} .text190{font-size:190%} .text200{font-size:200%} .text210{font-size:210%} .text220{font-size:220%} .b{font-weight:700} /* */ .u{text-decoration:underline} /* */ .del{text-decoration:line-throug} /* ł */ /* ---------------------------------------------------------------------- font-color - tHgJ[ ---------------------------------------------------------------------- */ .red{color:red} /* ԐF */ .blue{color:#2ca9e1} /* F */ .green{color:#82ae46} /* ΐF */ .orange{color:#ff7d00} /* F */ .yellow{color:#fff000} /* F */ .pink{color:#ff0084} /* sN */ .gray{color:#999999} /* O[ */ /* ---------------------------------------------------------------------- background-color - wiF ---------------------------------------------------------------------- */ .bg-yellow{padding:2px;background-color:#ff0} /* F̕wi */ .bg-blue{padding:2px;background-color:#4ab0f5} /* F̕wi */ .bg-red{padding:2px;background-color:red} /* ԐF̕wi */ /* ---------------------------------------------------------------------- text-align - zu ---------------------------------------------------------------------- */ .align1{text-align:center !important} /* */ .align2{text-align:right !important} /* E */ .align3{text-align:left !important} /* */ /* ---------------------------------------------------------------------- float - 荞 ---------------------------------------------------------------------- */ .r-flo{float:right;margin:10px} /* Eɉ荞 */ .l-flo{float:left;margin:10px} /* ɉ荞 */ .f-clear{clear:both} /* 荞݂̉ */ /* ---------------------------------------------------------------------- hover - 摜N}EXI[o[̕sx ---------------------------------------------------------------------- */ a img.fade { background:none !important; outline:none; -webkit-transition:all .3s; transition:all .3s; } a:hover img.fade { opacity:0.7; filter:alpha(opacity=70); -ms-filter:"alpha( opacity=70 )"; background:none !important; } /* ---------------------------------------------------------------------- text-style - eLXgX^C ---------------------------------------------------------------------- */ .att {padding-left:1em;text-indent:-1em;} /* ӏœsڈȍ~ */ .att_box { margin:2em 0 2.5em; padding:1em 1.2em; line-height:2.0; border:1px dotted #cccccc; background:#fcfcfc; box-shadow:0px 4px 0px 0px #f7f7f7; } /* eLXg{bNX */ /* ---------------------------------------------------------------------- margin - vf̊O̗] ---------------------------------------------------------------------- */ .m0{margin:0 !important} /* margin 0px w肷NX */ .mt0{margin-top:0 !important} /* margin-top0px w肷NX */ .mr0{margin-right:0 !important} /* margin-right0px w肷NX*/ .mb0{margin-bottom:0 !important} /* margin-bottom0px w肷NX*/ .ml0{margin-left:0 !important} /* margin-left0px w肷NX*/ .m5{margin:5px !important} .mt5{margin-top:5px !important} .mr5{margin-right:5px !important} .mb5{margin-bottom:5px !important} .ml5{margin-left:5px !important} .m10{margin:10px !important} .mt10{margin-top:10px !important} .mr10{margin-right:10px !important} .mb10{margin-bottom:10px !important} .ml10{margin-left:10px !important} .m15{margin:15px !important} .mt15{margin-top:15px !important} .mr15{margin-right:15px !important} .mb15{margin-bottom:15px !important} .ml15{margin-left:15px !important} .m20{margin:20px !important} .mt20{margin-top:20px !important} .mr20{margin-right:20px !important} .mb20{margin-bottom:20px !important} .ml20{margin-left:20px !important} .m25{margin:25px !important} .mt25{margin-top:25px !important} .mr25{margin-right:25px !important} .mb25{margin-bottom:25px !important} .ml25{margin-left:25px !important} .m30{margin:30px !important} .mt30{margin-top:30px !important} .mr30{margin-right:30px !important} .mb30{margin-bottom:30px !important} .ml30{margin-left:30px !important} .m35{margin:35px !important} .mt35{margin-top:35px !important} .mr35{margin-right:35px !important} .mb35{margin-bottom:35px !important} .ml35{margin-left:35px !important} .m40{margin:40px !important} .mt40{margin-top:40px !important} .mr40{margin-right:40px !important} .mb40{margin-bottom:40px !important} .ml40{margin-left:40px !important} .m45{margin:45px !important} .mt45{margin-top:45px !important} .mr45{margin-right:45px !important} .mb45{margin-bottom:45px !important} .ml45{margin-left:45px !important} .m50{margin:50px !important} .mt50{margin-top:50px !important} .mr50{margin-right:50px !important} .mb50{margin-bottom:50px !important} .ml50{margin-left:50px !important} .m55{margin:55px !important} .mt55{margin-top:55px !important} .mr55{margin-right:55px !important} .mb55{margin-bottom:55px !important} .ml55{margin-left:55px !important} .m60{margin:60px !important} .mt60{margin-top:60px !important} .mr60{margin-right:60px !important} .mb60{margin-bottom:60px !important} .ml60{margin-left:60px !important} .m65{margin:65px !important} .mt65{margin-top:65px !important} .mr65{margin-right:65px !important} .mb65{margin-bottom:65px !important} .ml65{margin-left:65px !important} .m70{margin:70px !important} .mr70{margin-right:70px !important} .mb70{margin-bottom:70px !important} .ml70{margin-left:70px !important} .m75{margin:75px !important} .mt75{margin-top:75px !important} .mr75{margin-right:75px !important} .mb75{margin-bottom:75px !important} .ml75{margin-left:75px !important} .m80{margin:80px !important} .mt80{margin-top:80px !important} .mr80{margin-right:80px !important} .mb80{margin-bottom:80px !important} .ml80{margin-left:80px !important} /* ---------------------------------------------------------------------- padding - vf̗̓] ---------------------------------------------------------------------- */ .p0{padding:0 !important} /* padding-0px w肷NX */ .pt0{padding-top:0 !important} /* padding-top0px w肷NX */ .pr0{padding-right:0 !important} /* padding-right0px w肷NX */ .pb0{padding-bottom:0 !important} /* padding-bottom0px w肷NX */ .pl0{padding-left:0 !important} /* padding-left0px w肷NX */ .p5{padding:5px !important} .pt5{padding-top:5px !important} .pr5{padding-right:5px !important} .pb5{padding-bottom:5px !important} .pl5{padding-left:5px !important} .p10{padding:10px !important} .pt10{padding-top:10px !important} .pr10{padding-right:10px !important} .pb10{padding-bottom:10px !important} .pl10{padding-left:10px !important} /* === sns-botton.css === */ @charset "UTF-8"; /* ----------------------- Share button -------------------------- */ @font-face { font-family: 'design_plus'; src: url('../fonts/design_plus.eot?v=1.2'); src: url('../fonts/design_plus.eot?v=1.2#iefix') format('embedded-opentype'), url('../fonts/design_plus.woff?v=1.2') format('woff'), url('../fonts/design_plus.ttf?v=1.2') format('truetype'), url('../fonts/design_plus.svg?v=1.2#design_plus') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "design_plus" !important; line-height: 1; font-style: normal; font-variant: normal; font-weight: normal; speak: none; text-transform: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-feedly:before { content: "\e907"; } .icon-hatebu:before { content: "\e908"; } .icon-line:before { content: "\e909"; } .icon-pocket:before { content: "\e90a"; } .icon-google-plus:before { content: "\e900"; } .icon-google-plus2:before { content: "\e901"; } .icon-facebook:before { content: "\e902"; } .icon-facebook2:before { content: "\e903"; } .icon-twitter:before { content: "\e904"; } .icon-rss:before { content: "\e90b"; } .icon-rss2:before { content: "\e906"; } .icon-pinterest:before { content: "\e905"; } /*-------------------------------- Share Buttons ---------------------------------*/ .share-top { margin-bottom: 30px; } .share-btm { margin-bottom: 50px; } /*-------------------------------- share_top1（Style1） ---------------------------------*/ .share-type1 { width: 100%; } .share-type1 h2 { color: #666666; font-weight: 400; } .share-type1 ul { list-style: none; margin: 0; padding: 0; } .share-type1 li { display: inline-block; padding: 0; text-align: center; } .share-type1 li > a:hover { -webkit-transform: translate3d(0, 1px, 0); transform: translate3d(0, 1px, 0); } .share-type1 a { min-width: 27px; text-decoration: none; display: inline-block; margin: 0 5px 5px 0; font-size: 12px; font-weight: 400; color: #fff !important; background: #fafafa; border-radius: 2px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); text-shadow: none; text-align: center; line-height: 25px; padding: 1px 5px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .share-type1 i { position: relative; top: 3px; color: #fff; font-size: 1.3em; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1); } .share-type1 .ttl { margin: 0 3px 0 2px; text-align: center; line-height: 20px; } .share-type1 .share-count { display: inline; font-size: 9px; color: #fff; padding: 0; line-height: 25px; margin: 0; border-radius: 0 1px 1px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 767px) { .share-type1 { width: 100%; } .share-type1 ul { margin-bottom: 15px; } .share-type1 li > a span { display: none; } .share-type1 a { margin-right: 2px; } .share-type1 i { left: 1px; } .share-type1 .share-count { margin-left: 3px; } } /*-------------------------------- share_btm1（Style3） ---------------------------------*/ .share-type3 .sns { margin: 0; text-align: center; } .share-type3 ul { margin: 0 -3% 3% 0; list-style: none; } .share-type3 li { float: left; width: 47%; margin: 0 3% 1.5% 0; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .post .share-type3 ul li { list-style: none; background-image: none; padding: 0; } .share-type3 ul li a { position: relative; display: block; top: 3px; font-size: 13px; padding: 10px 2px; color: #fff; border-radius: 2px; text-align: center; text-decoration: none; vertical-align: middle; } .share-type3 ul li a i { position: relative; top: 3px; font-size: 140%; } .share-type3 ul li a .ttl { margin: 0 3px 0 4px; display: inline-block; text-align: center; font-size: 12px; } .share-type3 ul li a .share-count { position: absolute; bottom: -2px; right: 8px; font-size: 10px; padding: 0; line-height: 25px; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .share-type3 ul li a:hover { -webkit-transform: translate3d(0px, 2px, 1px); -moz-transform: translate3d(0px, 2px, 1px); transform: translate3d(0px, 2px, 1px); } @media only screen and (min-width: 480px) { .share-type3 { width: 100%; margin: 20px 0 15px; } .share-type3 ul { margin-right: -1%; list-style: none; overflow: hidden; } .share-type3 li { width: 24%; margin: 0 1% 2% 0; } .share-type3 li a { font-size: 12px; padding: 10px 2px; } .share-type3 li:nth-child(4n) { margin-right: 0; } } /*------------- share_top1 & share_btm1 button_color -------------*/ /* Twitter */ .share-type1 .twitter a, .share-type3 .twitter a { background-color: #55acee; } .share-type1 .twitter a:hover, .share-type3 .twitter a:hover { background-color: #468ec5; } /* Facebook */ /* .share-type1 ul li.twitter a, .share-type3 ul li.twitter a { color:#fff; background-color:#55acee; } */ .share-type1 ul li.facebook a, .share-type3 ul li.facebook a { background-color: #35629a; } .share-type1 ul li.facebook a:hover, .share-type3 ul li.facebook a:hover { background-color: #1f3669; } /* Google+ */ .share-type1 ul li.googleplus a, .share-type3 ul li.googleplus a { background-color: #dd4b39; } .share-type1 ul li.googleplus a:hover, .share-type3 ul li.googleplus a:hover { background-color: #b94031; } .share-type1 ul li.googleplus a i { top: 4px; } /* Hatena */ .share-type1 ul li.hatebu > a, .share-type3 ul li.hatebu a { background-color: #3c7dd1; } .share-type1 ul li.hatebu > a:hover, .share-type3 ul li.hatebu a:hover { background-color: #0270ac; } /* Pocket */ .share-type1 ul li.pocket a, .share-type3 ul li.pocket a { background-color: #ee4056; } .share-type1 ul li.pocket a:hover, .share-type3 ul li.pocket a:hover { background-color: #c53648; } /* rss */ .share-type1 ul li.rss a, .share-type3 ul li.rss a { background-color: #ffb53c; } .share-type1 ul li.rss a:hover, .share-type3 ul li.rss a:hover { background-color: #e09900; } /* Feedly */ .share-type1 ul li.feedly a, .share-type3 ul li.feedly a { background-color: #6cc655; } .share-type1 ul li.feedly > a:hover, .share-type3 ul li.feedly > a:hover { background-color: #5ca449; } /* Pinterest */ .share-type1 ul li.pinterest a, .share-type3 ul li.pinterest a { background-color: #d4121c; } .share-type1 ul li.pinterest a:hover, .share-type3 ul li.pinterest a:hover { background-color: #a42f35; } /*-------------------------------- share_top2（Style2） ---------------------------------*/ .share-type2 { width: 100%; /*margin:30px 0 15px;*/ } .share-type2 h2 { color: #444; font-weight: 400; } .share-type2 ul.type2 { margin: 0; padding: 0; list-style: none; } .share-type2 ul.type2 li { display: inline-block; padding: 0; text-align: center; } .share-type2 ul.type2 li a { text-decoration: none; display: inline-block; margin: 0 5px 5px 0; font-size: 12px; font-weight: 400; border-radius: 2px; color: #222 !important; text-align: center; background: #fafafa !important; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); text-shadow: none; line-height: 25px; padding: 1px 5px 0; } .share-type2 ul.type2 li a i { position: relative; top: 3px; color: #222; font-size: 1.3em; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1); } .share-type2 ul.type2 li a .ttl { margin: 0 3px 0 2px; text-align: center; line-height: 20px; } .share-type2 ul.type2 li a .share-count { color: #444; font-size: 9px; padding: 0; line-height: 25px; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .share-type2 ul.type2 li a:hover, .share-type2 ul.type2 li a:hover i, .share-type2 ul.type2 li a:hover .share-count { color: #fff !important; } .share-type2 ul.type2 li a:hover { border-color: rgba(255, 255, 255, 0.1); } @media screen and (max-width: 480px) { .share-type2 { width: 100%; margin: 0; } .share-type2 ul.type2 { margin-bottom: 15px; } .share-type2 ul.type2 li a { margin-right: 2px; } .share-type2 ul.type2 li a i { left: 1px; } .share-type2 ul.type2 li > a span.ttl { display: none; } .share-type2 ul.type2 li a .share-count { margin-left: 3px; } } /*-------------------------------- share_btm2（Style4） ---------------------------------*/ .share-type4 { text-align: center; } .share-type4 .sns { margin: 0; } .share-type4 ul.type4 { margin: 0 -3% 2% 0; list-style: none; } .share-type4 ul.type4 li { float: left; width: 47%; margin: 0 3% 3% 0; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .post .share-type4 ul li { list-style: none; background-image: none; padding: 0; } .share-type4 ul.type4 li a { position: relative; display: block; top: 5px; font-size: 13px; padding: 10px 2px; text-decoration: none; border-radius: 2px; color: #222 !important; text-align: center; background: #fafafa !important; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); text-shadow: none; } .share-type4 ul.type4 li a i { position: relative; top: 3px; font-size: 140%; color: #222 !important; } .share-type4 ul.type4 li a .ttl { margin: 0 3px 0 4px; display: inline-block; text-align: center; font-size: 12px; } .share-type4 ul.type4 li a .share-count { position: absolute; bottom: -2px; right: 8px; font-size: 10px; padding: 0; line-height: 25px; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; color: #222 !important; } .share-type4 ul.type4 li a:hover, .share-type4 ul.type4 li a:hover i, .share-type4 ul.type4 li a:hover .share-count { color: #fff !important; } @media only screen and (min-width: 480px) { .share-type4 { width: 100%; margin: 20px 0 15px; } .share-type4 ul.type4 { margin-right: -1%; list-style: none; overflow: hidden; } .share-type4 ul.type4 li { width: 24%; margin: 0 1% 2% 0; } .share-type4 ul.type4 li a { font-size: 12px; padding: 10px 2px; } .share-type4 ul.type4 li:nth-child(4n) { margin-right: 0; } } /*------------- share_top2 & share_btm4 button_color -------------*/ /* Twitter */ .share-type2 ul.type2 li.twitter a, .share-type4 ul.type4 li.twitter a { color: #222 !important; background-color: #fafafa !important; } .share-type2 ul.type2 li.twitter a:hover, .share-type4 ul.type4 li.twitter a:hover { color: #fff !important; background-color: #55acee !important; } /* Facebook */ .share-type2 ul.type2 li.facebook a, .share-type4 ul.type4 li.facebook a { color: #222 !important; background-color: #fafafa !important; } .share-type2 ul.type2 li.facebook a:hover, .share-type4 ul.type4 li.facebook a:hover { color: #fff !important; background-color: #35629a !important; } /* Google+ */ .share-type2 ul.type2 li.googleplus a, .share-type4 ul.type4 li.googleplus a { color: #222 !important; background-color: #fafafa !important; } .share-type2 ul.type2 li.googleplus a:hover, .share-type4 ul.type4 li.googleplus a:hover { color: #fff !important; background-color: #dd4b39 !important; } .share-type2 ul.type2 li.googleplus a i, .share-type4 ul.type4 li.googleplus a i { top: 4px; } /* Hatena */ .share-type2 ul.type2 li.hatebu a, .share-type4 ul.type4 li.hatebu a { color: #222 !important; background-color: #fafafa !important; } .share-type2 ul.type2 li.hatebu a:hover, .share-type4 ul.type4 li.hatebu a:hover { color: #fff !important; background-color: #3c7dd1 !important; } /* Pocket */ .share-type2 ul.type2 li.pocket a, .share-type4 ul.type4 li.pocket a { color: #222 !important; background-color: #fafafa !important; } .share-type2 ul.type2 li.pocket a:hover, .share-type4 ul.type4 li.pocket a:hover { color: #fff !important; background-color: #ee4056 !important; } /* rss */ .share-type2 ul.type2 li.rss a, .share-type4 ul.type4 li.rss a { color: #222 !important; background-color: #fafafa !important; } .share-type2 ul.type2 li.rss a:hover, .share-type4 ul.type4 li.rss a:hover { color: #fff !important; background-color: #ff8c00 !important; } /* Feedly */ .share-type2 ul.type2 li.feedly a, .share-type4 ul.type4 li.feedly a { color: #222 !important; background-color: #fafafa !important; } .share-type2 ul.type2 li.feedly a:hover, .share-type4 ul.type4 li.feedly a:hover { color: #fff !important; background-color: #6cc655 !important; } /* Pinterest */ .share-type2 ul.type2 li.pinterest a, .share-type4 ul.type4 li.pinterest a { color: #222 !important; background-color: #fafafa !important; } .share-type2 ul.type2 li.pinterest a:hover, .share-type4 ul.type4 li.pinterest a:hover { color: #fff !important; background-color: #d4121c !important; } /*-------------------------------- share_top5（公式ボタン） ---------------------------------*/ .sns_default_top { padding: 0; overflow: hidden; list-style: none; } .sns_default_top ul li { display: inline-block; margin: 0 5px 3px 0; line-height: 1 !important; overflow: hidden; vertical-align: top; } .sns_default_top ul li.twitter_button { width: 89px; } .sns_default_top ul li.fbshare_button:hover { text-decoration: none; } .sns_default_top ul li.google_button { width: 58px; } .sns_default_top ul li.pocket_button { width: 88px; } @media only screen and (max-width: 480px) { .sns_default_top ul li { margin-bottom: 6px; } .sns_default_top ul li.twitter_button { margin-left: 0; } } /* === responsive.css === */ @charset "utf-8"; /* レイアウト */ @media only screen and (max-width:1199px){ #header { height:56px; width:100%; min-width:0; position:relative; left:0px; top:0px; z-index:100; margin:0; } #header_inner { height:auto; width:100%; height:56px; margin:0 auto; position:relative; } .mobile .mobile_header_fix #header { position:fixed; } .home #header { position:relative; background:#262e31; } } @media only screen and (max-width:767px) { #header_inner { width:100%; } } @media only screen and (max-width:991px){ #left_col { width:auto; float:none; padding:0 0 40px 0; } #side_col { width:auto; float:none; padding:0 0 10px 0; } } @media only screen and (max-width:767px){ #main_contents { width:auto; margin:0 auto; padding:0; } .mobile_header_fix #main_contents { padding-top:56px; } .home.mobile_header_fix #main_contents { padding-top:0px; } #main_col { width:auto; margin:20px auto 20px; padding:0 20px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } } @media only screen and (max-width:767px){ .page-template-page-noside #main_col, .page-template-page-noside-notitle #main_col, .error404 #main_col { width:auto; float:none; margin:0 auto; } .page #main_col { margin-top:15px; padding-top:15px; } } /* ---------------------------------------------------------------------- トップページ ---------------------------------------------------------------------- */ @media only screen and (max-width:1199px){ .mobile_header_fix.home #top { padding-top:56px; } } @media only screen and (max-width:767px){ .home #top { min-width:0; margin:0 0 50px 0; } } /* スライダー */ @media only screen and (max-width:767px){ #header_slider { height:90vh; min-width:0; } #header_slider .item { height:90vh; } #header_slider .item img { display:none; } } /* スライダーのキャッチコピー */ @media only screen and (max-width:767px){ #header_slider .caption, #header_video .caption, #header_youtube .caption { width:100%; padding:0 50px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } #header_slider .caption .title, #header_video .caption .title, #header_youtube .caption .title { font-size:24px !important; } #header_video .caption .desc, #header_youtube .caption .desc { font-size:16px !important; } #header_slider .slick-dots { bottom:100px; } #header_slider.no_slider_nav .slick-dots { bottom:20px; } } @media screen and (max-width:600px) { #header_slider .caption { padding:0 20px; } #header_slider_nav .slick-current, #header_slider_nav .item:hover { background:#fff; } } /* スライダーナビゲーションリンク */ @media only screen and (max-width:991px){ #header_slider_nav .item { padding:10px 20px; } #header_slider_nav .catch { font-size:14px; line-height:2; } } /* 動画 */ @media only screen and (max-width: 767px) { #header_slider_nav { position:static; } #header_video { min-width:0; } } /* Youtube 動画 */ @media only screen and (max-width: 767px) { #header_youtube { min-width:0; } } /* ３点ボックスコンテンツ */ @media only screen and (max-width:991px){ #index_3box_list { display:block; width:100%; } #index_3box_list .box { width:100%; } } @media only screen and (max-width:767px){ #index_3box { width:auto; margin:0 auto; } #index_3box_header { padding:0 20px;} #index_3box_header .headline { font-size:26px !important; } #index_3box_header .desc { text-align:left; font-size:14px!important; } #index_3box_list .box { position:relative; padding:40px; } #index_3box_list .icon { margin:0 auto 31px; } #index_3box_list .catch { text-align:left; margin-bottom:22px; } #index_3box_list .desc { height:auto; overflow:none; margin:0 0 31px 0; } } @media screen and (max-width:550px) { #index_3box { width:100%; margin:0 auto; } #index_3box_list .box { margin:0 auto; position:relative; padding:40px 20px; } #index_3box_list .icon { float:none; width:128px; height:128px; border-radius:128px; position:relative; } #index_3box_list .icon span:before { top:46px; left:144px; } #index_3box_list .catch { text-align:center; } #index_3box_list .link { position:relative; right:0; left:0; bottom:0px; text-align:center; } } /* ３点ボックスコンテンツの下の画像 */ @media only screen and (max-width:767px){ #index_center_image { margin:0 0 25px 0; } } /* ４点ボックスコンテンツ */ @media only screen and (max-width:767px){ #index_4box_list { flex-direction:column; } #index_4box { width:auto; margin:0 auto 50px; padding:0 20px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } #index_4box_list .box { width:auto; margin:0 0 -1px 0; } #index_4box_list .box.num1, #index_4box_list .box.num3 { border-right:1px solid #ddd; } #index_4box_list .box.num3 { margin-bottom:-1px; } #index_4box_list .box.num4 { margin-bottom:1px; } #index_4box_list .box.num3 .image { float:left; margin:0 35px 0 0; } #index_4box_list .box.num2 .image, #index_4box_list .box.num4 .image { float:right; margin:0 0 0 35px; } } @media screen and (max-width:550px) { #index_4box_list .box { height:auto; float:none; } #index_4box_list .box.num1, #index_4box .box.num3 { border-right:1px solid #ddd; } #index_4box_list .box a.link { padding:30px 20px; } #index_4box_list .box .image { float:none; margin:0 auto 35px; } #index_4box_list .box.num2 .image, #index_4box_list .box.num3 .image, #index_4box_list .box.num4 .image { float:none; margin:0 auto 35px; } #index_4box_list .box .catch { text-align:center; } #index_4box_list .box .desc { height:auto; overflow:none; } } /* 一覧の見出し */ @media only screen and (max-width:767px){ .index_list_header { width:auto; margin:0 auto 40px; padding:0 20px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } .index_list_header .headline { float:none; text-align:center; font-size:26px !important; } .index_archive_link { display:none; } .mobile_archive_link .index_archive_link { display:inline-block; float:none; } .mobile_archive_link { text-align:center; margin:0 0 40px; } } /* お知らせ一覧 */ @media only screen and (max-width:767px){ #index_news_list { width:auto; margin:0 auto 50px; padding:0 20px; } #index_news_list .mobile_archive_link { margin-top:20px;} .news_list li { padding:0 18px; } .news_list .date { display:inline-block; float:none; margin:17px 10px 0 0; line-height:30px; } .news_list .category { display:inline-block; float:none; margin:17px 20px 0 0; line-height:30px; } .news_list .title { float:none; clear:both; display:block; line-height:1.6; width:auto; } .news_list .title a { display:block; padding:0; } .use_animation #index_news_list .mobile_archive_link .index_archive_link { opacity:0; } .use_animation #index_news_list.animated .mobile_archive_link .index_archive_link { -webkit-animation: opacityAnimation 1.0s ease forwards 1.0s; animation: opacityAnimation 1.0s ease forwards 1.0s; } } /* ブログ一覧 */ @media only screen and (max-width:991px) { .blog_list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .blog_list .box { margin-right: 0; width: calc((100% - 20px) / 2); } } @media only screen and (max-width:767px){ #index_blog_list { margin:0 auto 20px; width:calc(100% - 40px); } #index_blog_list .blog_list { display:block; } .blog_list .box { float:none; display:inline-block; vertical-align:top; height:auto; margin:0 0 20px 0; width:100%; } .blog_list .box .date { margin-left:10px; font-size:10px; } .blog_list .box:nth-child(3n) { margin-right:20px; } .blog_list .box:nth-child(2n) { margin-right:0px; } .blog_list .box .image { height:auto; } .blog_list .box .title a { height:auto; overflow:none; } .use_animation #index_blog_list .mobile_archive_link .index_archive_link { opacity:0; } .use_animation #index_blog_list.animated .mobile_archive_link .index_archive_link { -webkit-animation: opacityAnimation 1.0s ease forwards 1.0s; animation: opacityAnimation 1.0s ease forwards 1.0s; } } @media screen and (max-width:550px) { .blog_list { margin:0; } .blog_list .box { float:none; display:block; width:100%; height:auto; margin:0 0 20px 0; } .blog_list .box:nth-child(3n) { margin-right:0px; } .blog_list .box:nth-child(2n) { margin-right:0px; } } /* 料金システム表/機能比較表 */ @media only screen and (max-width:767px){ #index_price_function { width:initial; width: auto; margin:0 0 40px 0; padding:0 20px; } .index_price_function + .index_price_function { margin-top:20px; } } /* フリースペース */ @media only screen and (max-width:1149px){ .index_free_content { width:initial; width: auto; margin:0 0 40px 0 !important; padding:0 20px; } } /* ---------------------------------------------------------------------- 大きな画像　トップページの中央画像、フッター画像、アーカイブページ上部など ---------------------------------------------------------------------- */ @media only screen and (max-width:767px){ .wide_image { /*height:400px;*/ width:100%; min-width:0; position:relative; } .wide_image .caption { width:auto; padding:20px; } .wide_image .caption .title { font-size:24px!important; } .wide_image .caption .desc { text-align:left; } .wide_image .caption .desc { font-size:14px!important;} } /* ---------------------------------------------------------------------- 制作実績一覧 ---------------------------------------------------------------------- */ @media only screen and (max-width:767px){ #index_work_list { width:calc(100% - 40px); margin:0 20px; } #index_work_list #work_list_wrap { padding:0; margin-bottom:0; } #work_list_wrap { box-sizing:border-box; padding:0 20px; width:100%; } .work_list { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .work_list .box { width:100%; margin:0 0 20px 0; } .work_list .box .date { margin-bottom:0; } .use_animation #index_work_list .mobile_archive_link .index_archive_link { opacity:0; } .use_animation #index_work_list.animated .mobile_archive_link .index_archive_link { -webkit-animation: opacityAnimation 1.0s ease forwards 1.0s; animation: opacityAnimation 1.0s ease forwards 1.0s; } } @media screen and (max-width:600px) { .work_list .box { float:none; width:100%; height:auto; margin:0 0 20px 0; padding-bottom:20px; } .work_list .box:nth-child(3n) { margin-right:0px; } .work_list .box:nth-child(2n) { margin-right:0px; } .work_list .box .title { height:auto; line-height:1.8; } .work_list .box .title a { padding:15px 20px; } .work_list .box .image { margin:75px auto 20px; } .work_list .box .catch { margin-left:20px; margin-right:20px; } .work_list .box .date { margin-left:20px; margin-right:20px; font-size:10px; } } /* カテゴリ―ボタン */ @media only screen and (max-width:767px){ #work_category_list { width:auto; margin:0 20px 40px; } #work_category_list li { float:left; width:50%; height:80px; margin:0 -1px -1px 0; } } @media screen and (max-width:550px) { #work_category_list li { float:none; width:100%; margin:0 0 -1px 0; } } /* ---------------------------------------------------------------------- 製作実績ページ ---------------------------------------------------------------------- */ /* 見出し */ @media only screen and (max-width:767px){ #work_header { min-width:0; height:auto; } #work_header_inner { width:auto; margin:0 auto; padding:15px 20px; } #work_header .category { margin:0 0 10px 0; float:none; } #work_header .title { margin:0; float:none; height:auto; line-height:1.8; } } /* 詳細ページ　下部 */ @media only screen and (max-width:767px){ #work_footer_data { padding:20px 20px 0; margin:0 0 40px 0; } #work_footer_data .image { position:relative; top:0; left:0px; margin:0 auto 30px; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } #work_footer_data .data { margin:0; } #work_footer_data .title { text-align:center; } #work_footer_data .link { text-align:center; } } /* ボタン */ @media only screen and (max-width:767px){ #work_footer_data .link_button { margin:0 0 20px 0; text-align:center; } } /* 詳細ページ　ナビゲーション */ @media only screen and (max-width:767px){ #work_navigation a { padding:0 45px; } #work_navigation a.prev { margin:0 4px 10px; } #work_navigation a.next { margin:0 4px; } } /* ---------------------------------------------------------------------- アーカイブページ ---------------------------------------------------------------------- */ @media only screen and (max-width:767px){ #page_header { margin:0 0 30px 0; } #page_header .headline { font-size:24px !important; line-height:1.4; } } /* ページング */ @media only screen and (max-width:767px){ .page_navi { margin:0 0 30px 0; } } /* ---------------------------------------------------------------------- お知らせ ---------------------------------------------------------------------- */ @media only screen and (max-width:767px){ #archive_news_list .news_list { margin:0 0 50px 0; } #single_news { background:#f7f7f7; padding:20px 20px 0px; margin:0 0 30px 0; } #single_news_list { margin:30px 0 30px 0; } } /* ---------------------------------------------------------------------- ヘッダー ---------------------------------------------------------------------- */ /* PCのスタイルをリセット　iPadの回転対策 */ @media only screen and (max-width:1199px){ .pc #header_logo #logo_text, .pc #header_logo #logo_image { width:auto; } } /* メニューボタン */ @media only screen and (max-width:1199px){ a.menu_button { position:absolute; right:0px; z-index:9; display:inline-block; font-size:11px; color:#333; width:56px; height:56px; line-height:56px; text-decoration:none; text-align:center; } a.menu_button span { text-indent:100%; white-space:nowrap; overflow:hidden; display:block; } a.menu_button:before { font-family:'design_plus'; color:#fff; display:block; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; font-size:18px; width:24px; height:24px; line-height:24px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a.menu_button:before { content:'\f0c9'; } a.menu_button:hover, a.menu_button.active { background:#333; } a.menu_button:hover:before, a.menu_button.active:before { color:#fff; } } /* グローバルメニュー */ @media only screen and (max-width:1199px){ #global_menu { display:none; clear:both; width:100%; margin:0; top:56px; position:absolute; z-index:9; box-shadow: 1px 2px 1.5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 2px 1.5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 1px 2px 1.5px rgba(0, 0, 0, 0.1); } #global_menu ul { margin:0; } #global_menu ul ul { display:none; } #global_menu a { position:relative; display:block; margin:0; padding:0px 15px; height:50px; line-height:50px; overflow:hidden; text-decoration:none; color:#fff; background:#333; font-size:13px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } #global_menu a:hover { color:#fff; } #global_menu ul ul a { padding-left:28px; background:#222; } #global_menu ul ul ul a { padding-left:42px; background:#111; } #global_menu ul ul ul ul a { padding-left:55px; background:#000; } #global_menu li.menu-item-has-children { position:relative; } #global_menu .child_menu_button { display:block; position:absolute; text-align:center; width:60px; height:49px; right:0px; top:1px; z-index:9; cursor:pointer; } #global_menu .child_menu_button .icon:before { content:'+'; font-size:13px; color:#aaa; text-align:center; display:block; width:20px; height:20px; line-height:20px; border:1px solid #555; border-radius:100%; position:absolute; left:20px; top:15px; } #global_menu .child_menu_button.active .icon:before, #global_menu .child_menu_button:hover .icon:before { color:#fff; border-color:#fff; } #global_menu li.menu-item-has-children.open > .child_menu_button .icon:before { content:'-'; } #global_menu li.menu-item-has-children.open > ul { display:block; } } /* ロゴ */ @media only screen and (max-width:1199px){ #logo_text { margin:0 0 0 15px; z-index:10; float:left; text-align:left; width:-webkit-calc(100% - 90px); width:-moz-calc(100% - 90px); width:calc(100% - 90px); overflow:hidden; } #logo_text h1 { font-weight:normal; height:56px; line-height:56px; } #logo_text a { text-decoration:none; display:block; -webkit-transition-property:none; -moz-transition-property:none; -o-transition-property:none; transition-property:none; } #logo_text a:hover { text-decoration:underline; } #logo_image { position:absolute; top:50%; left:calc(100% * 65 / 1280); -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); } #logo_image img.pc_logo_image { display:none; } #logo_image img.mobile_logo_image { display:block; } #logo_text_fixed, #logo_image_fixed { display:none; } } /* パンくずリンク */ @media only screen and (max-width:767px){ #bread_crumb { margin:0 0 30px 0; height:auto; line-height:1.6; min-width:0px; padding:15px 20px; } #bread_crumb ul { width:auto; margin:0 auto; } #bread_crumb li.home a:before { top:5px; left:0px; } #bread_crumb li:after { top:2px; } } /* ---------------------------------------------------------------------- 記事ページ ---------------------------------------------------------------------- */ /* 記事タイトル */ @media only screen and (max-width:767px){ #post_meta_top {margin-top:0;} #post_meta_top .date { line-height:30px; margin: 0 10px; font-size:10px; } #post_title { font-size:24px !important; line-height:1.4; margin:0 0 20px; } #post_image { margin-bottom:15px; } } /* 記事本文*/ @media only screen and (max-width:767px){ .post_content { margin:0; } .single .post_content p,.single .post_content li, .single .post_content dt, .single .post_content dd {font-size: 14px;} .single .post_content h2 {font-size: 20px;} .single .post_content h3 {font-size: 18px;} .single .post_content h4 {font-size: 14px; padding: 10px 13px;} } /* SNSボタン */ @media only screen and (max-width:767px){ #single_share_top { margin:-5px 0 10px; } #single_share_top #share_top1 { padding-top:0; } } /* メタ情報 */ @media only screen and (max-width:767px){ #post_meta_bottom { margin:0 0 20px 0; background:#fff; padding:0; } #post_meta_bottom li { display:block; margin:0 0 10px 0; border:none; font-size:12px; line-height:1.6; } #post_meta_bottom li:last-child { border:none; margin:0; } #post_meta_bottom li.post_category:before { top:0px; left:0px; } #post_meta_bottom li.post_tag:before { top:2px; left:0px; } #post_meta_bottom li.post_author:before { top:0px; left:0px; } #post_meta_bottom li.post_comment:before { top:0px; left:0px; } } /* 次の記事、前の記事 */ @media only screen and (max-width:767px){ #previous_next_post { margin:0 0 30px 0; } #previous_next_post .prev_post, #previous_next_post .next_post { width:50%; } #previous_next_post .prev_post { margin-bottom:-1px; } #previous_next_post a { height:auto; text-align:center; height:50px; line-height:50px; } #previous_next_post .prev_post a::before { line-height:50px; height:50px; } #previous_next_post .next_post a::before { line-height:50px; height:50px; } #previous_next_post a span { height:auto; } #previous_next_post span.nav { display:block; } #previous_next_post span.title { display:none; } #previous_next_post .prev_post span.nav { margin-left:-35px; } #previous_next_post .next_post span.nav { margin-right:-35px; } } /* 広告 */ @media only screen and (max-width:991px) { #single_banner_area { margin:0 0 15px 0; text-align:center; } #single_banner_area .single_banner_left { float:none; padding:0 0 15px 0; margin:0 auto; } #single_banner_area .single_banner_right { float:none; padding:0 0 15px 0; margin:0 auto; } #single_banner_area img { max-width:100%; height:auto; display:inline; } } /* 広告2 */ @media only screen and (max-width:991px) { #single_banner_area_bottom { margin: -20px 0 0; text-align:center; } #single_banner_area_bottom .single_banner_left { float:none; padding:0 0 15px 0; margin:0 auto; } #single_banner_area_bottom .single_banner_right { float:none; padding:0; margin:0 auto; } #single_banner_area_bottom img { max-width:100%; height:auto; display:inline; } } /* 広告（ショートコードver） */ @media only screen and (max-width:991px) { #single_banner_area2 { margin:0 0 15px 0; text-align:center; } #single_banner_area2 .single_banner_left { float:none; padding:0 0 15px 0; margin:0 auto; } #single_banner_area2 .single_banner_right { float:none; padding:0 0 5px 0; margin:0 auto; } #single_banner_area2 img { max-width:100%; height:auto; display:inline; } } /* 関連記事 */ @media only screen and (max-width:767px){ #related_post .headline { height:45px; line-height:45px; margin-bottom:15px; } #related_post { overflow:hidden; } #related_post ol { margin-right:-15px; } #related_post li, #related_post li:nth-child(4n) { width:33.33333%; width:-webkit-calc(100% / 3 - 15px); width:-moz-calc(100% / 3 - 15px); width:calc(100% / 3 - 15px); margin:0 15px 15px 0; } #related_post li:nth-child(3n) { margin-right:0; } #related_post li .image { margin:0 0 15px 0; display:block; width:100%; height:auto; } #related_post li .image img { /* スマホではhoverが効かないためアニメーションは無効にして、height:auto;が有効になるように以下を設定する */ width:100% !important; height:auto !important; -webkit-transform:none !important; -webkit-transition-property:none !important; -webkit-transition:0 !important; -moz-transform:none !important; -moz-transition-property:none !important; -moz-transition:0 !important; -ms-transform:none !important; -ms-transition-property:none !important; -ms-transition:0 !important; -o-transform:none !important; -o-transition-property:none !important; -o-transition:0 !important; transform:none !important; transition-property:none !important; transition:0 !important; } } @media screen and (max-width:550px) { #related_post ol { margin-right:-15px; } #related_post li, #related_post li:nth-child(4n) { width:50%; width:-webkit-calc(50% - 15px); width:-moz-calc(50% - 15px); width:calc(50% - 15px); margin:0 15px 15px 0; } #related_post li:nth-child(3n) { margin-right:15px; } } /* ---------------------------------------------------------------------- コメント ---------------------------------------------------------------------- */ @media only screen and (max-width:767px){ #comment_headline { margin:0 0 15px 0; } #comment_area, #trackback_area { margin:15px 0px 0; } } /* コメント・トラックバックのタブ */ @media only screen and (max-width:767px){ #comment_header { position:relative; margin:0 0 15px; } #comment_header ul { margin:0; } #comment_header ul li.comment_switch_active a:after, #comment_header #comment_closed p:after { display:none; } } @media screen and (max-width:500px) { #comment_header ul li { float:none; text-align:center; margin:0; width:100%; } } /* コメントの基本部分 */ @media only screen and (max-width:767px){ .comment { padding:10px 10px 0; } } /* コメントの情報部分 */ @media only screen and (max-width:767px){ .comment-meta-left { float:left; width:100%; } } /* フォーム部分 */ @media only screen and (max-width:767px){ .comment_form_wrapper { border:1px solid #ccc; margin:0 0 25px; padding:15px; background:#fff; } } /* ---------------------------------------------------------------------- フッター ---------------------------------------------------------------------- */ /* フッター上部 */ @media only screen and (max-width:767px){ #footer_top { min-width:0; } #footer_top_inner { width:auto; padding:35px 0 10px; } } /* widget */ @media only screen and (max-width:991px){ #footer_widget { margin:50px 20px; width:auto; font-size:0; text-align:left; } } /* メニュー */ @media only screen and (max-width:991px){ #footer_menu { margin:0 0 0 20px; width:auto; font-size:0; text-align:left; } #footer_menu ul, #footer_menu ul:last-child { display:block; vertical-align:top; float:left; width:50%; text-align:left; margin:0 20px 40px 0; width:-webkit-calc(50% - 20px); width:-moz-calc(50% - 20px); width:calc(50% - 20px); } } /* 住所 */ @media only screen and (max-width:767px){ #footer_address { margin:0 20px; text-align:center; border-top:1px dotted #ccc; padding-top:40px; } #footer_address .info { font-size:12px; } #footer_address li { display:block; margin:0; } } /* フッター下部 */ @media only screen and (max-width:767px){ #footer_bottom { width:auto; min-width:0; height:auto; background:none !important; } #footer_bottom_inner { width:auto; height:auto; } #footer_bottom a { } } /* SNSボタン */ @media only screen and (max-width:767px){ #footer_social_link { position:relative; left:0px; right:0; margin:auto; top:0px; background:#000; text-align:center; padding:0 0 40px 0; } #footer_social_link li { float:none; display:inline-block; margin:0 2px; } } /* ページ上部へ戻るボタン */ @media only screen and (max-width:767px){ #return_top { position:fixed; right:0px; bottom:0px; z-index:999; -webkit-transform: translate3d(0,120%,0); transform: translate3d(0,120%,0); -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } #return_top.active { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } #return_top a { position:relative; display:block; height:60px; width:60px; text-decoration:none; border-radius:0; } #return_top span { text-indent:100%; white-space:nowrap; overflow:hidden; display:block; } #return_top a:before { font-family:'design_plus'; color:#fff; font-size:18px; display:block; position:absolute; width:23px; height:23px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #return_top a:before { content:'\e911'; top:22px; left:21px; } } /* フッターナビ */ /* @media only screen and (max-width:767px){ .dp-footer-bar { display:table; } } */ /* 固定フッターが有効時、モバイルデバイス調整用 */ /* @media only screen and (max-width:767px){ body.mobile_device { padding-bottom:65px; } body.mobile_device #return_top.active { -webkit-transform: translate3d(0,-65px,0); transform: translate3d(0,-65px,0); } } */ /* ---------------------------------------------------------------------- サイドコンテンツ ---------------------------------------------------------------------- */ /* 基本設定 */ @media only screen and (max-width:767px){ .side_headline { text-align:center; } .side_widget { margin:0 0 25px 0; font-size:12px; position:relative; } .side_widget:last-child, .side_widget:only-child { margin:0; } } /* search */ @media only screen and (max-width:767px){ .widget_search #search-box, .widget_search #s, .side_widget.google_search #s { width:75%; height:40px; margin:0 0 5px 0; } .widget_search #search-btn input, .widget_search #searchsubmit, .side_widget.google_search #searchsubmit { width:25%; } } /* プロジェクト */ @media only screen and (max-width:767px){ .work_list_widget li, .footer_widget .work_list_widget li { margin:0 5px 5px 0 !important; width:auto; height:auto; width:-webkit-calc(100% / 3 - 5px); width:-moz-calc(100% / 3 - 5px); width:calc(100% / 3 - 5px); } .work_list_widget .image { width:100% !important; height:auto !important; } .work_list_widget .image img { /* スマホではhoverが効かないためアニメーションは無効にして、height:auto;が有効になるように以下を設定する */ width:100% !important; height:auto !important; -webkit-transform:none !important; -webkit-transition-property:none !important; -webkit-transition:0 !important; -moz-transform:none !important; -moz-transition-property:none !important; -moz-transition:0 !important; -ms-transform:none !important; -ms-transition-property:none !important; -ms-transition:0 !important; -o-transform:none !important; -o-transition-property:none !important; -o-transition:0 !important; transform:none !important; transition-property:none !important; transition:0 !important; } } /* === footer-bar.css === */ @charset "UTF-8"; /** * スマホ用固定フッターバーの設定 */ @font-face { font-family: 'design_plus'; src: url('../fonts/design_plus.eot?v=1.3'); src: url('../fonts/design_plus.eot?v=1.3#iefix') format('embedded-opentype'), url('../fonts/design_plus.woff?v=1.3') format('woff'), url('../fonts/design_plus.ttf?v=1.3') format('truetype'), url('../fonts/design_plus.svg?v=1.3#design_plus') format('svg'); font-weight: normal; font-style: normal; } .icon-file-text:before { content: "\f15c"; } .icon-share-alt:before { content: "\f1e0"; } .icon-phone:before { content: "\f095"; } .icon-envelope:before { content: "\f0e0"; } .icon-tag:before { content: "\f02b"; } .icon-pencil:before { content: "\f040"; } .icon-close:before { content: "\e91a"; font-family: "design_plus"; } .dp-footer-bar { background: #ffffff; border-top: 1px solid #ddd; display: flex; flex-wrap: wrap; font-size: 10px; text-align: center; width: 100%; z-index: 9998; } .dp-footer-bar a { display: block; padding: 10px 0; } .dp-footer-bar-item { flex: 1; } .dp-footer-bar-item + .dp-footer-bar-item { border-left: 1px solid #ddd; } .dp-footer-bar-item:only-child .dp-footer-bar-icon { display: block; position: relative; } .dp-footer-bar-item:only-child .dp-footer-bar-icon:before { position: absolute; right: 15px; } .dp-footer-bar-icon:before { display: block; font-family: "design_plus"; font-size: 16px; margin-bottom: .5em; } .modal-overlay { background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } .modal-content { margin: auto; position: fixed; bottom: 20%; left: 0; right: 0; width: 209px; z-index: 9999; } .modal-close:before { color: #fff; font-size: 32px; position: absolute; bottom: 20%; right: 0; text-align: center; width: 50px; } .share { text-align: center; } .share-button { float: left; vertical-align: center; width: 50px; height: 50px; } .share-button--rounded-square { border-radius: 2px; overflow: hidden; } .share-button + .share-button { margin-left: 3px; } .share-button a { display: block; position: relative; width: 100%; height: 100%; } .share-button a img { width:100%; height:auto; } .hatena-bookmark-button{ background: #00A4DE; border-radius: 4px; } #dp-footer-bar { position:fixed; right:0px; bottom:0px; z-index:999; width:100%; } .dp-footer-bar-type1 { opacity:0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .dp-footer-bar-type1.is-active { opacity:1; } .dp-footer-bar-type2 { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } .dp-footer-bar-type2.is-active { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .u-hidden { display: none; } /* === front-page.css === */ body { line-height: 1.6; } img { max-width: 100%; margin: auto; } a { text-decoration: none; color: inherit; transition: 0.4s; &:hover { text-decoration: none; } } /*** font */ .font12 { font-size: 12px; } .font16 { font-size: 16px; } .font18 { font-size: 18px; } .font20 { font-size: 20px; } .font24 { font-size: 24px; } .font26 { font-size: 26px; } .font30 { font-size: 30px; } .font34 { font-size: 34px; } .font40 { font-size: 40px; } .font45 { font-size: 45px; } @media screen and (max-width: 768px) { .font20, .font24 { font-size: 16px; } .font26 { font-size: 17px; } .font30 { font-size: 17px; } .font34 { font-size: 23px; } .font40 { font-size: 24px; } .font45 { font-size: 24px; } } /*** カラー */ .f_purple { color: #8f2255; } .f_beige { color: #d4b16e; } .f_grey { color: #b1b1b1; } .f_grey2 { color: #959595; } /*** フェードイン */ .fadein { /* 最初は非表示 */ transform: translateY(30px); opacity: 0; visibility: hidden; transition: transform 1s, opacity 1s, visibility 1s; } /* フェードイン時に入るクラス */ .is-fadein { transform: translateX(0); opacity: 1; visibility: visible; } /*** 見出し */ h2.style1 { display: table; margin-left: auto; margin-right: auto; position: relative; } h2.style1 span { position: relative; z-index: 9; } h2.style1::before { content: ""; position: absolute; background-color: #ebebeb; width: 105%; height: 20px; bottom: -2px; left: -2.5%; z-index: 0; } h2.style1.c_beige::before { background-color: #e9d8b6; } h2.style1.c_white::before { background-color: #fff; } @media screen and (max-width: 768px) { h2.style1::before { height: 12px; } } /*** シェイプ */ .r_box { border-radius: 15px; } /*** 背景 */ .text_bg_purple { background: #8f2255; } .text_bg_yellow { background: #d4b16e; } .bg_gray { background: #eaeaea; } /*** スペース */ .contents { margin-top: 89px; } .sec_space_top { margin-top: 90px; } .sec_space_bottom { margin-bottom: 90px; } .con_space { padding: 90px 0; } @media screen and (max-width: 768px) { .contents { margin-top: 64px; } .sec_space_top { margin-top: 30px; } .sec_space_bottom { margin-bottom: 30px; } .con_space { padding: 40px 0; } } /*** グローバルナビ */ .header { position: fixed; left: 0; top: 0; width: 100%; background: #fff; z-index: 999; } .header_inner { padding: 15px; } .nav_list { display: flex; justify-content: flex-end; width: 100%; } .nav_list li { margin-left: 29px; font-weight: bold; } .nav_list li a:hover { color: #000; } .nav_list li a { position: relative; } .nav_list li a::after { background: #8f2255; content: ""; width: 100%; height: 2px; position: absolute; left: 0; bottom: -5px; margin: auto; transform-origin: right top; transform: scale(0, 1); transition: transform 0.3s; } .nav_list li a:hover:after { transform-origin: center top; transform: scale(1, 1); } @media (min-width: 767px) { .nav-logo { display: none; } } @media only screen and (max-width: 768px) { .header .logo { width: 200px; } .nav_wrap { position: fixed; top: -100vh; right: 0; width: 100%; height: 100vh; padding-top: 60px; padding-left: 15px; padding-right: 15px; background-color: #fff; transition: all 0.6s; z-index: 200; overflow-y: auto; } .hamburger { position: absolute; right: 15px; top: 8px; width: 40px; height: 40px; cursor: pointer; z-index: 300; } .hamburger span { position: absolute; left: 11px; width: 25px; height: 3px; background-color: #8f2255; transition: all 0.6s; } .hamburger span:nth-child(1) { top: 16px; } .hamburger span:nth-child(2) { top: 23px; } .black_bg { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 100; background-color: #333; opacity: 0; visibility: hidden; transition: all 0.6s; cursor: pointer; } .nav-open .nav_wrap { top: 0; } .nav-open .black_bg { opacity: 0.8; visibility: visible; } .nav-open .hamburger span:nth-child(1) { transform: rotate(45deg); top: 20px; } .nav-open .hamburger span:nth-child(2) { transform: rotate(-45deg); top: 20px; } .nav-logo { text-align: center; } .nav-logo img { width: 40vw; } .nav_list { display: block; padding: 0; margin-top: 40px; } .nav_list li { margin-left: 0; } .nav_list li a { display: block; border-bottom: 1px solid #ebebeb; padding: 15px; position: relative; } .nav_list li:first-child a { border-top: 1px solid #ebebeb; } .nav_list li a::before { position: absolute; content: ""; width: 25px; height: 25px; background-image: url(../img/btn_arr2.svg); background-repeat: no-repeat; background-size: contain; right: 15px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .nav_list li a::after { display: none; } } /************** TOP ***********/ /*** メインビジュアル */ .mainV { background-image: url("../img/img01.png"); background-repeat: no-repeat; background-size: cover; background-position: center; height: 592px; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 768px) { .mainV { background-image: url("../img/img01_sp.png"); height: 330px; } .mainV h1 img { max-width: 65vw; } } @media screen and (max-width: 320px) { .mainV { height: 280px; } .mainV h1 img { max-width: 75vw; } } /*** feature */ .bg_num { background-color: #8f2255; border: solid 3px #fff; outline: solid 10px #8f2255; margin: 8px; padding: 50px 15px; height: 286px; display: flex; align-items: center; } .bg_num .abs { position: absolute; left: 120px; top: 50%; transform: translateY(-50%); z-index: 0; } .bg_num .abs.abs_right { left: inherit; right: 120px; } @media screen and (max-width: 768px) { .bg_num { padding: 20px 15px; height: auto; } .bg_num .abs { left: 2vw; width: 30vw; } } /*** plan */ #plan { background-image: linear-gradient(0deg, transparent calc(100% - 1px), #fff calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #fff calc(100% - 1px)); background-size: 16px 16px; background-repeat: repeat; background-position: center center; background-color: #eee; } #plan h2 { display: table; margin-left: auto; margin-right: auto; border-top: solid 3px #8f2255; border-bottom: solid 3px #8f2255; background-color: #fff; padding: 15px 50px; position: relative; } #plan h2::after, #plan h2::before { content: ""; position: absolute; background-color: #8f2255; width: 100%; height: 2px; left: 0; } #plan h2::after { top: 3px; } #plan h2::before { bottom: 3px; } #plan .r_box .date_txt { display: flex; justify-content: center; } #plan .r_box .date_txt ul { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding: 0; } #plan .r_box .date_txt ul li:first-child { color: #8f2255; min-width: 150px; text-align: center; border-bottom: 2px solid #8f2255; border-top: 2px solid #8f2255; margin-right: 10px; } @media screen and (max-width: 768px) { #plan h2 { padding: 10px 20px; } #plan .r_box .date_txt ul { justify-content: space-between; } #plan .r_box .date_txt ul { width: 49%; text-align: center; } #plan .r_box .date_txt ul li, #plan .r_box .date_txt ul li:first-child { width: 100%; min-width: auto; } #plan .r_box .date_txt ul li:first-child { margin-bottom: 5px; margin-left: 10px; } } @media screen and (max-width: 320px) { #plan .r_box .date_txt { display: block; } #plan .r_box .date_txt ul { display: block; width: 100%; } #plan .r_box .date_txt ul li, #plan .r_box .date_txt ul li:first-child { margin-left: 0; margin-right: 0; } } /*** flow */ #flow .r_box { padding: 90px; } @media screen and (max-width: 768px) { #flow .r_box { padding: 1.5rem; } } /*** voice */ #voice h2 { background-image: url(../img/img13.svg); background-size: contain; background-repeat: no-repeat; padding: 15px 15px 33px 15px; display: table; margin-left: auto; margin-right: auto; color: #fff; } #voice .voice_box_wrap { display: flex; justify-content: space-between; } #voice .voice_box_wrap > * { width: 48%; padding: 80px 40px 40px 40px; position: relative; margin-top: 70px; } #voice .voice_box_wrap > * .pic { position: absolute; width: 128px; top: -60px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); } @media screen and (max-width: 768px) { #voice h2 { background-size: 100% 100%; padding: 12px 12px 24px 12px; } #voice .sp_scroll { overflow: scroll; } #voice .voice_box_wrap { min-width: 600px; } #voice .voice_box_wrap > * { padding: 60px 20px 20px 20px; margin-top: 55px; } #voice .voice_box_wrap > * .pic { width: 100px; top: -50px; } } /*** qa */ .ac_list { border-bottom: 2px solid #ebebeb; padding-top: 30px; padding-bottom: 30px; } .ac_list:last-child { border-bottom: none; } .ac-open { padding: 15px 0; font-size: 20px; display: flex; position: relative; } .ac_list .icon { width: 40px; margin-right: 15px; margin-bottom: 0; } .ac_list .txt { flex: 1; margin-bottom: 0; } .ac_list .q_txt { font-weight: bold; } .ac_list .q_txt .txt { font-weight: bold; padding-right: 65px; } .ac_list .a_txt { display: none; display: flex; padding-top: 25px; } .plus-wrap { position: absolute; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); width: 40px; height: 40px; } .ac-open .plus-wrap img { transform: rotate(0); transition: 0.3s; } .ac-open.active .plus-wrap img { transform: rotate(180deg); } @media screen and (max-width: 768px) { .ac_list { padding-top: 20px; padding-bottom: 20px; } .plus-wrap { width: 35px; height: 35px; } } /*** class */ #class .inner_box { display: flex; position: relative; } #class .inner_box .ribbon { position: absolute; width: 166px; top: 18px; left: -14px; } #class .inner_box > * { width: 50%; } #class .inner_box .txt_area { padding: 40px; } #class .inner_box .txt_area .ttl { border-bottom: 2px solid #000; } #class .inner_box .txt_area .indent { font-size: 13px; text-indent: -7px; padding-left: 7px; } #class .inner_box .img_area img { object-fit: cover; height: 100%; width: 100%; } @media screen and (max-width: 768px) { #class .inner_box { display: block; } #class .inner_box > * { width: 100%; } #class .inner_box .txt_area { padding: 20px; } #class .inner_box .ribbon { width: 150px; top: 15px; left: -12px; } } /*** instructor */ #instructor .pic img { width: 190px; } #instructor .cta_btn { display: table; margin-left: auto; margin-right: auto; color: #fff; background-color: #8f2255; padding: 20px 60px 20px 40px; border-radius: 500px; position: relative; text-decoration: none; } #instructor .cta_btn::after { content: ""; position: absolute; top: 50%; right: 25px; width: 12px; height: 12px; border-top: 3px solid #fff; border-right: 3px solid #fff; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } @media screen and (max-width: 768px) { #instructor .font20 { font-size: 14px; } #instructor .pic img { width: 140px; } } /*** news */ #news .news_list { padding-left: 0; } #news .news_list li { margin-bottom: 30px; } #news .news_list a { border-bottom: 1.5px solid #fff; display: block; padding-bottom: 5px; position: relative; font-weight: bold; } #news .news_list a::after { content: url("../img/btn_arr.svg"); display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 13px; } #news .news_list a:hover { color: inherit; } #news .news_list a span { padding-right: 10px; font-weight: normal; } @media screen and (max-width: 768px) { #news .news_list a span { display: block; font-size: 16px; } #news .news_list a { font-size: 19px; } #news .news_list a::after { width: 10px; } } #wp_blog a { display: block; } #wp_blog a:hover { color: inherit; opacity: 0.8; } #wp_blog .card-img-top { object-fit: cover; min-height: 192px; } #wp_blog .card-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /*** footer */ footer .top_back { position: absolute; top: -49px; left: 0; right: 0; margin: 0 auto; text-align: center; } @media (min-width: 767px) { .float_link_area { display: none; } } @media screen and (max-width: 768px) { footer { margin-bottom: 130px; } footer .top_back { top: -30px; } footer .top_back img { width: 60px; } .float_link_area { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #65c443; z-index: 99; } .float_link_area a { display: block; flex: 1; } } @media screen and (max-width: 560px) { footer { margin-bottom: 80px; } } /* === style.css === */ body { line-height: 1.6; } img { max-width: 100%; height: auto; } a { text-decoration: none; color: inherit; transition: 0.4s; } /*** font */ .font12 { font-size: 12px; } .font16 { font-size: 16px; } .font18 { font-size: 18px; } .font20 { font-size: 20px; } .font24 { font-size: 24px; } .font26 { font-size: 26px; } .font30 { font-size: 30px; } .font34 { font-size: 34px; } .font40 { font-size: 40px; } .font45 { font-size: 45px; } @media screen and (max-width: 768px) { .font20, .font24 { font-size: 16px; } .font26 { font-size: 17px; } .font30 { font-size: 17px; } .font34 { font-size: 23px; } .font40 { font-size: 24px; } .font45 { font-size: 24px; } } /*** カラー */ .f_purple { color: #8f2255; } .f_beige { color: #d4b16e; } .f_grey { color: #b1b1b1; } .f_grey2 { color: #959595; } /*** フェードイン */ .fadein { /* 最初は非表示 */ transform: translateY(30px); opacity: 0; visibility: hidden; transition: transform 1s, opacity 1s, visibility 1s; } /* フェードイン時に入るクラス */ .is-fadein { transform: translateX(0); opacity: 1; visibility: visible; } /*** 見出し */ h2.style1 { display: table; margin-left: auto; margin-right: auto; position: relative; } h2.style1 span { position: relative; z-index: 9; } h2.style1::before { content: ""; position: absolute; background-color: #ebebeb; width: 105%; height: 20px; bottom: -2px; left: -2.5%; z-index: 0; } h2.style1.c_beige::before { background-color: #e9d8b6; } h2.style1.c_white::before { background-color: #fff; } h2.style1.c_red::before { background-color: #8f2255; opacity: 0.15; } h2.style1.c_yellow::before { background: #d4b16e; opacity: 0.25; } @media screen and (max-width: 768px) { h2.style1::before { height: 12px; } } /*** シェイプ */ .r_box { border-radius: 15px; } /*** 背景 */ .text_bg_purple { background: #8f2255; } .text_bg_yellow { background: #d4b16e; } .bg_gray { background: #eaeaea; } /*** スペース */ .contents { margin-top: 89px; } .sec_space_top { margin-top: 90px; } .sec_space_bottom { margin-bottom: 90px; } .con_space { padding: 90px 0; } @media screen and (max-width: 768px) { .contents { margin-top: 10px; } .sec_space_top { margin-top: 30px; } .sec_space_bottom { margin-bottom: 30px; } .con_space { padding: 40px 0; } } /*** グローバルナビ */ .header { position: fixed; left: 0; top: 0; width: 100%; background: #fff; z-index: 999; } .header_inner { padding: 15px; } .nav_list { display: flex; justify-content: flex-end; width: 100%; margin-bottom: 0; } .nav_list li { margin-left: 29px; font-weight: bold; } #nav_has_sub { position: relative; } #nav_item_sub { background-color: #fff; width: clamp(300px, 100%, 500px); display: block; position: absolute; top: 60px; left: 0; margin: auto; padding: 0.5rem 0; transform: translate(-40%, 0px); box-shadow: 3px 3px 15px #696969; & li { display: block; margin: auto; text-align: center; padding: 1rem 0.5rem; } } @media (min-width: 768px) { .nav_list li { display: flex; justify-content: center; align-items: center; } } .nav_list li a:hover { color: #000; } .nav_list li a { position: relative; } .nav_list li a::after { background: #8f2255; content: ""; width: 100%; height: 2px; position: absolute; left: 0; bottom: -5px; margin: auto; transform-origin: right top; transform: scale(0, 1); transition: transform 0.3s; } .nav_list li a:hover:after { transform-origin: center top; transform: scale(1, 1); } @media (min-width: 767px) { .nav-logo { display: none; } } @media only screen and (max-width: 768px) { .header .logo { width: 200px; } .nav_wrap { position: fixed; top: -100vh; right: 0; width: 100%; height: 100vh; padding: 60px 15px; background-color: #fff; transition: all 0.6s; z-index: 200; overflow-y: auto; } .hamburger { position: absolute; right: 15px; top: 8px; width: 40px; height: 40px; cursor: pointer; z-index: 300; } .hamburger span { position: absolute; left: 11px; width: 25px; height: 3px; background-color: #8f2255; transition: all 0.6s; } .hamburger span:nth-child(1) { top: 16px; } .hamburger span:nth-child(2) { top: 23px; } .black_bg { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 100; background-color: #333; opacity: 0; visibility: hidden; transition: all 0.6s; cursor: pointer; } .nav-open .nav_wrap { top: 0; } .nav-open .black_bg { opacity: 0.8; visibility: visible; } .nav-open .hamburger span:nth-child(1) { transform: rotate(45deg); top: 20px; } .nav-open .hamburger span:nth-child(2) { transform: rotate(-45deg); top: 20px; } .nav-logo { text-align: center; } .nav-logo img { width: 40vw; } .nav_list { display: block; padding: 0; margin-top: 40px; } .nav_list li { margin-left: 0; } .nav_list li a { display: block; border-bottom: 1px solid #ebebeb; padding: 15px; position: relative; width: 100%; } .nav_list li:last-child a { border-bottom: none; } .nav_list li:first-child a { border-top: 1px solid #ebebeb; } .nav_list li a::before { position: absolute; content: ""; width: 25px; height: 25px; background-image: url(../img/btn_arr2.svg); background-repeat: no-repeat; background-size: contain; right: 15px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .nav_item_sub_open::before { transform: rotate(90deg) translateX(-50%) !important; } .nav_list li a::after { display: none; } } /************** TOP ***********/ /*** メインビジュアル */ .mainV { background-image: url("../img/img01.png"); background-repeat: no-repeat; background-size: cover; background-position: center; height: 592px; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 768px) { .mainV { background-image: none; height: auto; } .mainV h1 img { max-width: 65vw; } } @media screen and (max-width: 320px) { .mainV { height: 280px; } .mainV h1 img { max-width: 75vw; } } /*** youtube */ .frame_wrap .youtube { position: relative; width: 100%; padding-top: 56.25%; /* 動画の比率　*/ overflow: hidden; } .frame_wrap .arrow, .frame_wrap .arrow::before { content: ''; position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); } .frame_wrap .arrow { width: 56px; height: 56px; border-radius: 100%; background-color: rgba(255, 255, 255, .8); /* 矢印背景色　*/ pointer-events: none; } .frame_wrap .arrow::before { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 12px; border-color: transparent transparent transparent #222; /* 矢印色　*/ } .frame_wrap img { position: absolute; top: 50%; left: 0; width: 100%; height: auto; transform: translateY(-50%); } .frame_wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*** feature */ .bg_num { background-color: #8f2255; border: solid 3px #fff; outline: solid 10px #8f2255; margin: 8px; padding: 50px 15px; height: 286px; display: flex; align-items: center; } .bg_num .abs { position: absolute; left: 120px; top: 50%; transform: translateY(-50%); z-index: 0; } .bg_num .abs.abs_right { left: inherit; right: 120px; } @media screen and (max-width: 768px) { .bg_num { padding: 3rem 1rem; height: auto; } .bg_num .abs { left: 2vw; width: 30vw; } } /*** plan */ #plan { background-image: linear-gradient(0deg, transparent calc(100% - 1px), #fff calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #fff calc(100% - 1px)); background-size: 16px 16px; background-repeat: repeat; background-position: center center; background-color: #eee; } #plan h2 { display: table; margin-left: auto; margin-right: auto; border-top: solid 3px #8f2255; border-bottom: solid 3px #8f2255; background-color: #fff; padding: 15px 50px; position: relative; } #plan h2::after, #plan h2::before { content: ""; position: absolute; background-color: #8f2255; width: 100%; height: 2px; left: 0; } #plan h2::after { top: 3px; } #plan h2::before { bottom: 3px; } #plan .r_box .date_txt { display: flex; justify-content: center; gap: 0.8rem; } #plan .r_box .date_txt ul { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding: 0; gap: 0.8rem; } #plan .r_box .date_txt ul li:first-child { color: #8f2255; min-width: 150px; text-align: center; border-bottom: 2px solid #8f2255; border-top: 2px solid #8f2255; margin-right: 10px; } @media screen and (max-width: 768px) { #plan h2 { padding: 10px 20px; } #plan .r_box .date_txt ul { justify-content: space-between; } #plan .r_box .date_txt ul { width: 49%; text-align: center; } #plan .r_box .date_txt ul li, #plan .r_box .date_txt ul li:first-child { width: 100%; min-width: auto; } #plan .r_box .date_txt ul li:first-child { margin-bottom: 5px; margin-left: 10px; } } @media screen and (max-width: 320px) { #plan .r_box .date_txt { display: block; } #plan .r_box .date_txt ul { display: block; width: 100%; } #plan .r_box .date_txt ul li, #plan .r_box .date_txt ul li:first-child { margin-left: 0; margin-right: 0; } } /*** u_plan */ #u_plan .h2_ttl { display: flex; justify-content: center; width: fit-content; margin-left: auto; margin-right: auto; border-top: solid 3px #8f2255; border-bottom: solid 3px #8f2255; background-color: #fff; padding: 15px 30px; position: relative; } #u_plan .h2_ttl::after, #u_plan .h2_ttl::before { content: ""; position: absolute; background-color: #8f2255; width: 100%; height: 2px; left: 0; } #u_plan .h2_ttl::after { top: 3px; } #u_plan .h2_ttl::before { bottom: 3px; } #u_plan .plan_place_box { background: #8F2255; border-radius: 8px; padding: 15px 40px; } #u_plan .plan_place_box .sub_circle { background: #fff; height: 104px; width: 104px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; color: #8F2255; display: grid; justify-content: center; align-content: center; text-align: center; } #u_plan .plan_place_box .ttl_wrap { display: grid; place-content: center; place-items: center; grid-auto-flow: column; gap: 20px; margin-bottom: 15px; } #u_plan .plan_place_box .ttl_wrap .ttl { font-size: 72px; color: #fff; font-weight: bold; margin-bottom: 0; } #u_plan .plan_place_box .sub_circle p { margin-bottom: 0; font-weight: bold; line-height: 1; } #u_plan .plan_place_box .sub_circle .b_txt { font-size: 32px; display: inline-block; padding-top: 10px; } #u_plan .plan_place_box .place_box_wrap { display: flex; gap: 30px; } #u_plan .plan_place_box .place_box_wrap .place_box { flex: 1; border-radius: 8px; background-color: #fff; padding: 15px 40px; } #u_plan .plan_place_box .place_box_wrap .place_box .sub_ttl { font-size: 24px; font-weight: bold; text-align: center; background-color: rgba(143, 34, 85, 0.15); padding: 4px; margin-bottom: 0; } #u_plan .plan_place_box .place_box_wrap .place_box .main_place { font-size: 36px; font-weight: bold; text-align: center; padding-top: 20px; line-height: 1; margin-bottom: 0; margin-top: 8px; } #u_plan .plan_place_box .place_box_wrap .place_box .main_place span { font-size: 60px; } #u_plan .m_txt { font-size: 24px; font-weight: bold; } #u_plan .ex_box_wrap { display: flex; justify-content: center; align-content: center; text-align: center; gap: 20px; width: 100%; } #u_plan .ex_box_wrap .ex_box { flex: 1; padding: 15px 24px; background-color: rgba(143, 34, 85, 0.15); border-radius: 8px; text-align: center; } #u_plan .ex_box_wrap .ex_box .sub_ttl { font-size: 22px; font-weight: bold; border-bottom: 4px solid #8F2255; display: table; margin-inline: auto; margin-bottom: 22px; } #u_plan .ex_box_wrap .ex_box .p_txt { font-size: 22px; font-weight: bold; color: #8F2255; } #u_plan .ex_box_wrap .ex_box .sub_circle { background: #fff; height: 200px; width: 200px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; display: grid; justify-content: center; align-content: center; text-align: center; margin: auto; font-size: 24px; font-weight: bold; } #u_plan .ex_box_wrap .ex_box .sub_circle p { line-height: 1.2; margin-bottom: 0; } #u_plan .ex_box_wrap .ex_box .sub_circle .m_fc { color: #8F2255; } #u_plan .ex_box_wrap .ex_box .sub_circle .f_big { font-size: 60px; } #u_plan .arr_img img { width: 130px; max-width: 80%; } @media screen and (min-width: 992px) { #u_plan .plan_place_box .ttl_wrap .ttl { zoom: 0.7; } #u_plan .plan_place_box .place_box_wrap p, #u_plan .plan_place_box .place_box_wrap span #u_plan .ex_box_wrap .ex_box p, #u_plan .ex_box_wrap .ex_box span { zoom: 0.7; } #u_plan .ex_box_wrap .ex_box .sub_circle { height: 170px; width: 170px; } } @media screen and (max-width: 991px) { #u_plan .plan_place_box { padding: 20px; } #u_plan .plan_place_box .ttl_wrap { gap: 15px; margin-bottom: 20px; } #u_plan .plan_place_box .ttl_wrap .ttl { font-size: 5vw; } #u_plan .plan_place_box .place_box_wrap .place_box { padding: 20px; } #u_plan .plan_place_box .place_box_wrap .place_box .sub_ttl { font-size: 18px; } #u_plan .plan_place_box .place_box_wrap .place_box .main_place { font-size: 20px; padding-top: 0; } #u_plan .plan_place_box .place_box_wrap .place_box .main_place span { font-size: 40px; } #u_plan .m_txt { font-size: 18px; } #u_plan .ex_box_wrap .ex_box .sub_ttl { font-size: 16px; margin-bottom: 15px; } #u_plan .ex_box_wrap .ex_box .p_txt { font-size: 16px; } #u_plan .ex_box_wrap .ex_box .sub_circle { height: 150px; width: 150px; font-size: 16px; } #u_plan .ex_box_wrap .ex_box .sub_circle .f_big { font-size: 40px; } #u_plan .text_indent { text-indent: -12px; padding-left: 12px; font-size: 14px; } } @media screen and (max-width: 620px) { #u_plan .plan_place_box { padding: 15px; } #u_plan .plan_place_box .ttl_wrap { gap: 10px; margin-bottom: 15px; } #u_plan .plan_place_box .sub_circle { height: 82px; width: 82px; } #u_plan .plan_place_box .ttl_wrap .ttl { font-size: 8vw; } #u_plan .plan_place_box .sub_circle .b_txt { font-size: 22px; padding-top: 5px; } #u_plan .plan_place_box .sub_circle p { font-size: 14px; } #u_plan .plan_place_box .place_box_wrap .place_box { padding: 15px; } #u_plan .plan_place_box .place_box_wrap .place_box .sub_ttl { font-size: 14px; padding: 1px; } #u_plan .plan_place_box .place_box_wrap .place_box .main_place { font-size: 16px; } #u_plan .plan_place_box .place_box_wrap .place_box .main_place span { font-size: 30px; } #u_plan .ex_box_wrap { gap: 6px; } #u_plan .ex_box_wrap .ex_box { padding: 30px 5px; } #u_plan .ex_box_wrap .ex_box .p_txt { font-size: 14px; } #u_plan .ex_box_wrap .ex_box .sub_circle { height: 88px; width: 88px; font-size: 13px; } #u_plan .ex_box_wrap .ex_box .sub_circle .f_big { font-size: 24px; } } /*** flow */ #flow .r_box { padding: 90px; } @media screen and (max-width: 768px) { #flow .r_box { padding: 1.5rem; } } /*** voice */ #voice h2 { background-image: url(../img/img13.svg); background-size: contain; background-repeat: no-repeat; padding: 15px 15px 33px 15px; display: table; margin-left: auto; margin-right: auto; color: #fff; } #voice .voice_box_wrap { display: flex; justify-content: space-between; column-gap: 20px; align-items: flex-start; } #voice .voice_box_wrap>* { padding: 80px 26px 20px 26px; position: relative; margin-top: 70px; } #voice .voice_box_wrap>* .pic { position: absolute; width: 128px; top: -60px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); } #voice .voice_box .d_txt { overflow: hidden; transition: .4s; position: relative; box-sizing: border-box; height: 200px; } #voice .voice_box .d_txt.active p { padding-bottom: 40px; } #voice .voice_box .d_txt:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 67px; background: rgb(0, 0, 0); background: linear-gradient(0deg, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 100%); transition: .4s; } #voice .voice_box .d_txt.active:before { display: none; } #voice .voice_box .d_txt button { position: absolute; bottom: 0; right: 0; background-color: #8f2255; font-size: 14px; color: #fff; padding: 5px 15px; border-radius: 5px; line-height: 1; } #voice .voice_box .f_purple { min-height: 100px; } @media screen and (min-width: 769px) { #voice .voice_box .f_purple.font20 { font-size: 16px; } } @media screen and (max-width: 768px) { #voice h2 { background-size: 100% 100%; padding: 12px 12px 24px 12px; } /** #voice .sp_scroll { overflow: scroll; } #voice .voice_box_wrap { min-width: 600px; }**/ #voice .voice_box_wrap>* { min-width: 48%; padding: 60px 20px 20px 20px; margin-top: 55px; } #voice .voice_box_wrap>* .pic { width: 100px; top: -50px; } #voice .voice_box .d_txt button { padding: 10px 15px; } } /*** qa */ .ac_list { border-bottom: 2px solid #ebebeb; padding-top: 30px; padding-bottom: 30px; } .ac_list:last-child { border-bottom: none; } .ac-open { padding: 15px 0; font-size: 20px; display: flex; position: relative; } .ac_list .icon { width: 40px; margin-right: 15px; margin-bottom: 0; } .ac_list .txt { flex: 1; margin-bottom: 0; } .ac_list .q_txt { font-weight: bold; } .ac_list .q_txt .txt { font-weight: bold; padding-right: 65px; } .ac_list .a_txt { display: none; display: flex; padding-top: 25px; } .plus-wrap { position: absolute; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); width: 40px; height: 40px; } .ac-open .plus-wrap img { transform: rotate(0); transition: 0.3s; } .ac-open.active .plus-wrap img { transform: rotate(180deg); } @media screen and (max-width: 768px) { .ac_list { padding-top: 20px; padding-bottom: 20px; } .plus-wrap { width: 35px; height: 35px; } } /*** class */ #class .inner_box { display: flex; position: relative; } #class .inner_box .ribbon { position: absolute; width: 166px; top: 18px; left: -14px; } #class .inner_box>* { width: 50%; } #class .inner_box .txt_area { padding: 40px; } #class .inner_box .txt_area .ttl { border-bottom: 2px solid #000; } #class .inner_box .txt_area .indent { font-size: 13px; text-indent: -7px; padding-left: 7px; } #class .inner_box .img_area img { object-fit: cover; height: 100%; width: 100%; } @media screen and (max-width: 768px) { #class .inner_box { display: block; } #class .inner_box>* { width: 100%; } #class .inner_box .txt_area { padding: 20px; } #class .inner_box .ribbon { width: 150px; top: 15px; left: -12px; } } /*** instructor */ #instructor .pic img { width: 190px; } #instructor .cta_btn { display: table; margin-left: auto; margin-right: auto; color: #fff; background-color: #8f2255; padding: 20px 60px 20px 40px; border-radius: 500px; position: relative; text-decoration: none; } #instructor .cta_btn::after { content: ""; position: absolute; top: 50%; right: 25px; width: 12px; height: 12px; border-top: 3px solid #fff; border-right: 3px solid #fff; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } @media screen and (max-width: 768px) { #instructor .font20 { font-size: 14px; } #instructor .pic img { width: 140px; } } /*** news */ #news.con_space { padding: 90px 0 40px; } #news .news_list { padding-left: 0; } #news .news_list li { margin-bottom: 20px; border-bottom: 2px solid #8f2255; border-top: none; border-right: none; border-left: none; padding-bottom: 5px; } #news .news_list a { display: block; padding-bottom: 0; position: relative; font-weight: bold; transition: .4s; border: none; } #news .news_list a::after { content: url("../img/btn_arr.svg"); display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 13px; filter: invert(15%) sepia(26%) saturate(7039%) hue-rotate(312deg) brightness(99%) contrast(87%); } #news .news_list .category { margin: 6px 20px 0 0; } #news .news_list .category a { border-bottom: none; } #news .news_list .category a::after { display: none; } #news .news_list a:hover { color: inherit; text-decoration: none; opacity: .6; } #news .news_list .category a:hover { color: #fff; } #news .news_list a span { padding-right: 10px; font-weight: normal; } @media screen and (max-width: 768px) { #news .news_list li { display: flex; align-items: center; gap: 15px; } #news .news_list a span { display: block; font-size: 16px; padding-right: 15px; } #news .news_list a { font-size: 19px; flex: 1; } #news .news_list a::after { width: 10px; } #news .news_list .category { margin: 0 !important; } #news .news_list .category a { font-size: 12px; height: 25px; line-height: 25px; padding: 0 15px; min-width: 65px; } } #wp_blog a { display: block; } #wp_blog a:hover { color: inherit; opacity: 0.8; } #wp_blog .card-img-top { object-fit: cover; min-height: 192px; } #wp_blog .card-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /*** footer */ footer .top_back { position: absolute; top: -49px; left: 0; right: 0; margin: 0 auto; text-align: center; } @media (min-width: 767px) { .float_link_area { display: none; } } @media screen and (max-width: 768px) { footer { margin-bottom: 130px; } footer .top_back { top: -30px; } footer .top_back img { width: 60px; } .float_link_area { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #65c443; z-index: 99; } .float_link_area a { display: block; flex: 1; } } @media screen and (max-width: 560px) { footer { margin-bottom: 80px; } } @media screen and (max-width: 768px) { #flow .item7 { grid-row: .3333333333; grid-column: 1; grid-row: 2; background-color: gray; background: url(../img/step_bg_sp.png) no-repeat; background-position: center; background-size: contain } } #instructor .d_txt { overflow: hidden; transition: .4s; position: relative; box-sizing: border-box; height: 200px; } #instructor .d_txt { overflow: hidden; transition: .4s; position: relative; box-sizing: border-box; height: 200px; } #instructor .d_txt.active p { padding-bottom: 30px; } #instructor .d_txt:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 67px; background: rgb(0, 0, 0); background: linear-gradient(0deg, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 100%); transition: .4s; } #instructor .d_txt.active:before { display: none; } #instructor .d_txt button { position: absolute; bottom: 0; right: 0; background-color: #8f2255; font-size: 14px; color: #fff; padding: 5px 15px; border-radius: 5px; line-height: 1; } /* === fix.css === */ * { font-family: yu-gothic-pr6, sans-serif; } .SP { display: none !important; } .SP-block { display: none !important; } @media (max-width: 768px) { .SP { display: inline-block !important; } .SP-block { display: block !important; } .PC { display: none !important; } } h2 { font-weight: bold; } .form_btn { border: solid 1px #8f2255; border-radius: 5px; padding: 0.5em 2em; background-color: #8f2255; color: #fff !important; transition: all 0.5s; } .form_btn > a { color: #fff !important; } .form_btn:hover { opacity: 0.7; } @media (max-width: 768px) { .form_btn { margin-top: 1rem; text-align: center; } .form_btn a::before { display: none; } } #to-success { background: url(../img/success_bg.png) no-repeat; background-size: cover; background-position: center; background-color: #ebebeb; margin: auto; padding: 40px 30px 80px; } #to-success .container { width: clamp(0px, 90%, 1000px); margin: auto; padding: 0; } #to-success .container > h1 { margin: 0 auto 0px; text-align: center; } #to-success .container > h1 img { width: clamp(0px, 100%, 800px); } #to-success .container > h2 { max-width: 528px; margin: 0 auto 40px; text-align: center; } #to-success .container > h3 { margin: 0 auto 40px; text-align: center; color: #8f2255; text-align: center; font-family: "yu-mincho-pr6n", serif, sans-serif; font-size: 2.8rem; font-style: normal; font-weight: 800; line-height: normal; } #to-success .container > p { font-family: "yu-mincho-pr6n", serif, sans-serif; /* font-size: 24px; */ font-style: normal; font-weight: 500; line-height: 1.6em; /* 166.667% */ margin: 0 0 2em; } @media (max-width: 768px) { #to-success { padding: 2rem 0; } #to-success .container { width: clamp(0px, 90%, 1000px); margin: auto; padding: 0; } #to-success .container > h2 { margin: 0 auto 40px; text-align: center; } #to-success .container > h3 { margin: 0 auto 0.5em; text-align: center; color: #8f2255; text-align: center; font-size: 1.8rem; font-style: normal; font-weight: 800; line-height: 1.5em; } #to-success .container > p { font-size: 1.125rem; font-style: normal; font-weight: 500; line-height: 1.6em; /* 166.667% */ margin: 0 0 1.5rem; } } #feature { /* .mb-5 { margin-bottom: 4rem !important; } */ } #feature .bg_num { height: auto; } #feature h3 { color: #fff; font-family: yu-gothic-pr6, sans-serif; font-style: normal; } #feature .feature-fix-style-lists > li { width: 31%; } #feature .feature-fix-style-lists > li img { object-fit: contain; } @media (max-width: 768px) { #feature .feature-fix-style-lists > li { width: 50%; } #feature .feature-fix-style-lists > li:nth-child(1) { width: 100%; margin-bottom: -6vw; } #feature .feature-fix-style-lists > li:nth-child(1) > img { width: 45vw; height: 45vw; } #feature .feature-fix-style-lists > li:nth-child(2) { width: 45%; } #feature .feature-fix-style-lists > li:nth-child(2) > img { width: 45vw; height: 45vw; } #feature .feature-fix-style-lists > li:nth-child(3) { width: 45%; } #feature .feature-fix-style-lists > li:nth-child(3) > img { width: 45vw; height: 45vw; } } #feature .bg_num { margin: 8px 8px 6rem !important; padding: 7.5em 0; } #feature .bg_num .abs.abs_left { width: 15%; height: auto; left: 3%; right: auto; } #feature .bg_num .abs.abs_right { width: 16%; height: auto; left: auto; right: 2%; } @media (max-width: 768px) { #feature .bg_num { margin: 8px 8px 3rem !important; padding: 1em 0; } #feature .bg_num .abs.abs_left { width: 30%; height: auto; left: 3%; right: auto; } #feature .bg_num .abs.abs_right { width: 30%; height: auto; left: auto; right: 2%; } } #feature .feature-fix-style p { width: 93%; color: #000; /* 本文 游ゴシック24 */ font-family: yu-gothic-pr6, sans-serif; font-size: 1.5rem; font-style: normal; font-weight: 500; line-height: 1.7em; /* 166.667% */ margin: 0 auto 1.7em; } @media (max-width: 768px) { #feature .feature-fix-style p { font-size: 1.125rem; line-height: 1.5em; margin: 0 auto 1em; } } #feature .feature-fix-style p:last-of-type { margin: 0 auto 1rem; } #feature .feature-fix-style p span { color: #8f2255; font-weight: 700; } #feature .feature-fix-style .num01-img-contents { display: flex; justify-content: center; align-items: center; } #feature .feature-fix-style .num01-img-contents .num01-img-contents-txt { width: 312px; font-size: 1.5rem; line-height: 1.8em; margin: auto; } @media (max-width: 1400px) { #feature .feature-fix-style .num01-img-contents .num01-img-contents-txt { font-size: 1rem; } } #feature .feature-fix-style .num01-img { height: auto; display: flex; justify-content: center; align-items: center; max-width: 660px; } #feature .feature-fix-style .num01-img img { height: auto; width: 100%; } #feature .feature-fix-style .num02-img { display: flex; justify-content: center; align-items: center; height: auto; } #feature .feature-fix-style .num02-img img { height: auto; } @media (max-width: 768px) { #feature .feature-fix-style .num01-flex-img { flex: 3; display: flex; justify-content: center; align-items: center; } } #plan h2 { display: flex; justify-content: center; width: fit-content; } #plan .plan-fix-style-white-box { padding: 1.5em 0 !important; width: 93%; margin: auto; } #plan .plan-margin { margin: 7rem auto 0; } @media (max-width: 768px) { #plan .plan-margin { margin: 3rem auto 0; } } #plan .plan-fix-style > p { color: #000; /* 本文 游ゴシック24 */ width: 90%; font-size: 1.5rem; font-style: normal; font-weight: 500; line-height: 1.7em; /* 166.667% */ margin: 0 auto 1.5em; } #plan .plan-fix-style > p span { color: #8f2255; font-weight: 700; } @media (max-width: 768px) { #plan .plan-fix-style { width: 90% !important; } #plan .plan-fix-style.sp100 { width: 100% !important; } #plan .plan-fix-style .plan-margin { margin: 1rem auto 0; } #plan .plan-fix-style > p { font-size: 1.125rem; line-height: 1.7em; width: 100%; margin: 0 auto 1rem; } } #plan .plan-contents-wrapper .plan-contents-lists { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; padding: 0; width: 100%; gap: 2em 0; } #plan .plan-contents-wrapper .plan-contents-lists li { width: clamp(300px, 30%, 375px); height: auto; margin: 0 auto; } #plan .plan-contents-wrapper .plan-contents-lists li .plan-img-wrapper { text-align: center; } #plan .plan-contents-wrapper .plan-contents-lists li > h3 { border-radius: 10px; background: rgba(143, 34, 85, 0.15); line-height: 1.6em; text-align: center; margin: 27px auto 24px; font-size: 24px; font-weight: 700; } #plan .plan-contents-wrapper .plan-contents-lists li > p { font-size: 1.25rem; line-height: 1.5em; } #flow .container { max-width: 1230px; } #flow .r_box { padding: 90px 90px 60px; } @media (max-width: 768px) { #plan .plan-contents-wrapper .plan-contents-lists li{ width: 100%; } #plan .plan-contents-wrapper .plan-contents-lists li > p { font-size: 1.125rem; } #flow .r_box { padding: 2.5rem 1.25rem; } } #flow .step-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto 1fr; gap: 20px 60px; } #flow .step-img-wrapper { width: auto; height: auto; text-align: center; } #flow .step-txt-wrapper > h3 { color: #8f2255; text-align: center; /* font-size: 28px; */ font-style: normal; font-weight: 700; line-height: 36px; /* 128.571% */ margin: 0 auto 2em; } #flow .step-txt-wrapper > p { color: #000; /* font-size: 20px; */ font-style: normal; font-weight: 500; line-height: 32px; /* 160% */ text-align: justify; } #flow .step-txt-wrapper > p span { color: #8f2255; } #flow .item0 { grid-row: 1; grid-column: 0.25; background-color: gray; background: url(../img/step_bg.png) no-repeat; background-position: center; background-size: 75%; } #flow .item1 { grid-row: 1; grid-column: 1; } #flow .item2 { grid-row: 2; grid-column: 1; } #flow .item3 { grid-row: 1; grid-column: 2; } #flow .item4 { grid-row: 2; grid-column: 2; } #flow .item5 { grid-row: 1; grid-column: 3; } #flow .item6 { grid-row: 2; grid-column: 3; } @media (max-width: 768px) { #flow { padding: 0 0 1rem; } #flow .step-container { grid-template-columns: 25% 1fr; grid-template-rows: auto auto auto; gap: 0 1em; } #flow .step-container .step-txt-wrapper > h3 { text-align: left; margin: 1em 0 1em; } #flow .step-container .step-txt-wrapper > p { font-size: 1.125rem !important; font-style: normal; font-weight: 500; line-height: 1.5em; /* 160% */ text-align: justify; } #flow .item0 { grid-row: 0.3333333333; grid-column: 1; background-color: gray; background: url(../img/step_bg_sp.png) no-repeat; background-position: center; background-size: contain; } #flow .item1 { grid-row: 1; grid-column: 1; } #flow .item2 { grid-row: 1; grid-column: 2; } #flow .item3 { grid-row: 2; grid-column: 1; } #flow .item4 { grid-row: 2; grid-column: 2; } #flow .item5 { grid-row: 3; grid-column: 1; } #flow .item6 { grid-row: 3; grid-column: 2; } } #why .container { max-width: 1230px; } #why .bg-white { padding: 60px; } #why .bg-white > p { color: #000; font-size: 1.5rem; font-style: normal; font-weight: 500; line-height: 40px; /* 166.667% */ } @media (max-width: 768px) { #why .bg-white { padding: 3em 1em; } #why .bg-white > p { font-size: 1.125rem; font-style: normal; font-weight: 500; line-height: 1.5em; } } #why .why-contents-wrapper { margin: 5em auto 3em; } #why .why-contents-wrapper .why-strong-txt { color: #000; text-align: center; font-size: 1.75rem; font-style: normal; font-weight: 700; line-height: 36px; } @media (max-width: 768px) { #why .why-contents-wrapper { margin: 1em auto; } #why .why-contents-wrapper .why-strong-txt { font-size: 1.2rem; font-style: normal; font-weight: bold; line-height: 2em; } } #why .why-contents-wrapper .why-elements { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 40px auto 8px; flex-wrap: wrap; } @media (max-width: 768px) { #why .why-contents-wrapper .why-elements { gap: 0.1rem 0.3em; } } #why .why-contents-wrapper .why-elements .why-elements-item { width: fit-content; width: clamp(200px, 100%, 266px); } #why .why-contents-wrapper .why-elements .why-elements-item > p { width: clamp(200px, 100%, 266px); /* height: 266px; */ display: flex; aspect-ratio: 1; justify-content: center; align-items: center; background-color: #8f225535; border-radius: 50%; /* opacity: 0.15; */ color: #8f2255; text-align: center; font-size: 28px; font-style: normal; font-weight: 700; line-height: 36px; /* 128.571% */ } @media (max-width: 768px) { #why .why-contents-wrapper .why-elements .why-elements-item:nth-child(1) { width: 100%; } #why .why-contents-wrapper .why-elements .why-elements-item:nth-child(1) > p { width: clamp(0px, 100%, 160px); margin: auto; font-size: 100% !important; line-height: 1.5em; } #why .why-contents-wrapper .why-elements .why-elements-item:nth-child(2) { width: 49%; } #why .why-contents-wrapper .why-elements .why-elements-item:nth-child(2) > p { width: clamp(155px, 100%, 160px); margin: auto; font-size: 100% !important; line-height: 1.5em; } #why .why-contents-wrapper .why-elements .why-elements-item:nth-child(3) { width: 49%; } #why .why-contents-wrapper .why-elements .why-elements-item:nth-child(3) > p { width: clamp(155px, 100%, 160px); margin: auto; font-size: 100% !important; line-height: 1.5em; } } #price h2 { margin-bottom: 6rem !important; } #price .fix-p { max-width: 1180px; margin: auto; } #price .price-contents-wrapper { display: flex; gap: 20px; margin: 0 auto 15px; justify-content: center; align-items: flex-end; max-width: 1180px; } #price .price-contents-wrapper .price-content { width: clamp(280px, 100% 560px); height: auto; flex-shrink: 0; border-radius: 12px 12px 4px 4px; background: #fff; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25); } #price .price-contents-wrapper .price-content .price-content-inner { text-align: center; border-bottom: solid 1px rgba(0, 0, 0, 0.25); width: 90%; margin: auto; padding: 19px 0; } #price .price-contents-wrapper .price-content .price-content-inner:last-child { border-bottom: none; } #price .price-contents-wrapper .price-content .price-content-inner .price-content-txt { margin: 0 auto 10px; text-align: center; font-size: 1.125rem; font-style: normal; font-weight: 500; line-height: 1em; } #price .price-contents-wrapper .price-content .price-content-inner .price-content-txt-large { margin: 0 auto; text-align: center; font-size: 2rem; font-style: normal; font-weight: 700; line-height: 1.5em; } #price .price-contents-wrapper .price-content .price-content-inner .price-content-txt-large span { font-size: 1.75rem; } #price .price-contents-wrapper .price-content .price-content-inner .price-content-txt-medium { margin: 0 auto; text-align: center; font-size: 1.75rem; font-style: normal; font-weight: 700; line-height: 1em; } #price .price-contents-wrapper .price-content .price-content-inner .price-content-txt-medium span { font-size: 0.82rem; font-weight: normal; } #price .price-contents-wrapper .price-content .price-content-inner .price-content-icon { margin: auto; width: 40px; height: 40px; } #price .price-contents-wrapper .non-member { flex: 1 0 280px; } #price .price-contents-wrapper .non-member > h3 { color: #fff; text-align: center; font-size: 24px; font-style: normal; font-weight: 400; line-height: 40px; /* 166.667% */ background: rgba(0, 0, 0, 0.5); border-radius: 12px 12px 0 0; padding: 31px 0 26px; } #price .price-contents-wrapper .sub-member { flex: 1 0 280px; } #price .price-contents-wrapper .sub-member > h3 { color: #fff; text-align: center; font-size: 24px; font-style: normal; font-weight: 400; line-height: 40px; /* 166.667% */ background: #d4b16e; border-radius: 12px 12px 0 0; padding: 31px 0 26px; } #price .price-contents-wrapper .regular-member { flex: 2 1 560px; position: relative; border: #8f2255 solid 3px; border-radius: 20px 20px 4px 4px; } #price .price-contents-wrapper .regular-member .crown-wrapper { width: 72px; height: 50px; position: absolute; margin: auto; right: 0; left: 0; top: -1.5em; } #price .price-contents-wrapper .regular-member > h3 { color: #fff; text-align: center; font-size: 24px; font-style: normal; font-weight: 400; line-height: 40px; /* 166.667% */ background: #8f2255; border-radius: 12px 12px 0 0; padding: 51px 0 26px; } @media (max-width: 768px) { #price { /* width: 90%; margin: auto; */ } #price h2 { margin-bottom: 1rem !important; } #price .price-contents-wrapper { display: flex; gap: 2em 1em; margin: 0 auto 15px; justify-content: center; align-items: flex-end; max-width: 1180px; } #price .price-contents-wrapper .price-content { width: clamp(280px, 100% 560px); height: auto; flex-shrink: 0; border-radius: 12px 12px 4px 4px; background: #fff; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25); } #price .price-contents-wrapper .price-content .price-content-inner { text-align: center; border-bottom: solid 1px rgba(0, 0, 0, 0.25); width: 90%; margin: auto; padding: 1rem 0; } #price .price-contents-wrapper .price-content .price-content-inner:last-child { border-bottom: none; } #price .price-contents-wrapper .price-content .price-content-inner .price-content-txt { margin: 0 auto 10px; font-size: 0.625rem; font-style: normal; font-weight: 500; line-height: 1em; } #price .price-contents-wrapper .price-content .price-content-inner .price-content-txt-large { margin: 0 auto; font-size: 1.5rem; font-style: normal; font-weight: 700; line-height: 1.5em; } #price .price-contents-wrapper .price-content .price-content-inner .price-content-txt-large span { font-size: 1rem; } #price .price-contents-wrapper .price-content .price-content-inner .price-content-txt-medium { margin: 0 auto; text-align: center; font-size: 1rem; font-style: normal; font-weight: 700; line-height: 1em; } #price .price-contents-wrapper .price-content .price-content-inner .price-content-txt-medium span { font-size: 0.82rem; font-weight: normal; } #price .price-contents-wrapper .price-content .price-content-inner .price-content-icon { margin: auto; width: 24px; height: 24px; } #price .price-contents-wrapper .non-member { flex: 1 0 120px; } #price .price-contents-wrapper .non-member > h3 { color: #fff; text-align: center; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 2em; /* 166.667% */ background: rgba(0, 0, 0, 0.5); border-radius: 12px 12px 0 0; padding: 0.75em 0; } #price .price-contents-wrapper .sub-member { flex: 1 0 120px; } #price .price-contents-wrapper .sub-member > h3 { color: #fff; text-align: center; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 2em; background: #d4b16e; border-radius: 12px 12px 0 0; padding: 0.75em 0; } #price .price-contents-wrapper .regular-member { flex: 2 1 260px; position: relative; border-radius: 20px 20px 4px 4px; } #price .price-contents-wrapper .regular-member .crown-wrapper { width: 43px; height: auto; position: absolute; margin: auto; right: 0; left: 0; top: -1.5em; } #price .price-contents-wrapper .regular-member > h3 { color: #fff; text-align: center; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 2em; /* 166.667% */ background: #8f2255; border-radius: 12px 12px 0 0; padding: 1em 0 0.75em; } } /******************** * footer ********************/ #footer .footer-nav { padding: 2rem 0; background: #ebebeb; } #footer .footer-nav .nav_list { width: clamp(0px, 100%, 700px); display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5em; margin-inline: auto; padding: 0; } #footer .footer-nav .sns_link_list { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.2em; margin-inline: auto; margin-top: 1.2rem; padding: 0; } #footer .footer-nav .sns_link_list img { width: 60px; } #footer .footer-nav .nav_list .nav_item { padding: 1rem 0; } @media (max-width: 769px) { #footer .footer-nav .nav_list { width: clamp(0px, 100%, 700px); display: flex; justify-content: center; flex-wrap: wrap; } #footer .footer-nav .nav_list .nav_item { padding: 1rem 0; width: clamp(150px, 45%, 250px); border-top: solid 1px #fff; } #footer .footer-nav .nav_list .nav_item a { padding: 1em 0.5em; font-size: 0.7rem; width: 100%; } #footer .footer-nav .nav_list .nav_item a::before { width: 1rem; height: 1rem; background-image: url(../img/btn_arr3.svg); } #footer .footer-nav .sns_link_list { gap: 0.8em; } #footer .footer-nav .sns_link_list img { width: 50px; } } /* === footer-bar.css === */ @charset "UTF-8"; /** * スマホ用固定フッターバーの設定 */ @font-face { font-family: 'design_plus'; src: url('../fonts/design_plus.eot?v=1.3'); src: url('../fonts/design_plus.eot?v=1.3#iefix') format('embedded-opentype'), url('../fonts/design_plus.woff?v=1.3') format('woff'), url('../fonts/design_plus.ttf?v=1.3') format('truetype'), url('../fonts/design_plus.svg?v=1.3#design_plus') format('svg'); font-weight: normal; font-style: normal; } .icon-file-text:before { content: "\f15c"; } .icon-share-alt:before { content: "\f1e0"; } .icon-phone:before { content: "\f095"; } .icon-envelope:before { content: "\f0e0"; } .icon-tag:before { content: "\f02b"; } .icon-pencil:before { content: "\f040"; } .icon-close:before { content: "\e91a"; font-family: "design_plus"; } .dp-footer-bar { background: #ffffff; border-top: 1px solid #ddd; display: flex; flex-wrap: wrap; font-size: 10px; text-align: center; width: 100%; z-index: 9998; } .dp-footer-bar a { display: block; padding: 10px 0; } .dp-footer-bar-item { flex: 1; } .dp-footer-bar-item + .dp-footer-bar-item { border-left: 1px solid #ddd; } .dp-footer-bar-item:only-child .dp-footer-bar-icon { display: block; position: relative; } .dp-footer-bar-item:only-child .dp-footer-bar-icon:before { position: absolute; right: 15px; } .dp-footer-bar-icon:before { display: block; font-family: "design_plus"; font-size: 16px; margin-bottom: .5em; } .modal-overlay { background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } .modal-content { margin: auto; position: fixed; bottom: 20%; left: 0; right: 0; width: 209px; z-index: 9999; } .modal-close:before { color: #fff; font-size: 32px; position: absolute; bottom: 20%; right: 0; text-align: center; width: 50px; } .share { text-align: center; } .share-button { float: left; vertical-align: center; width: 50px; height: 50px; } .share-button--rounded-square { border-radius: 2px; overflow: hidden; } .share-button + .share-button { margin-left: 3px; } .share-button a { display: block; position: relative; width: 100%; height: 100%; } .share-button a img { width:100%; height:auto; } .hatena-bookmark-button{ background: #00A4DE; border-radius: 4px; } #dp-footer-bar { position:fixed; right:0px; bottom:0px; z-index:999; width:100%; } .dp-footer-bar-type1 { opacity:0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .dp-footer-bar-type1.is-active { opacity:1; } .dp-footer-bar-type2 { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } .dp-footer-bar-type2.is-active { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .u-hidden { display: none; } /* === common.css === */ /*** header */ .header { position: fixed; left: 0; top: 0; width: 100%; background: #fff; z-index: 999; box-sizing: border-box; } .header * { box-sizing: border-box; } header a:hover { text-decoration: none; } .header_inner { padding: 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .nav_wrap { margin-left: auto; } .nav_list { display: flex; justify-content: flex-end; width: 100%; margin-bottom: 0; } .nav_list li { margin-left: 29px; font-weight: bold; line-height: 1.6; } #nav_has_sub { position: relative; } #nav_item_sub { background-color: #fff; width: clamp(300px, 100%, 500px); display: block; position: absolute; top: 60px; left: 0; margin: auto; padding: 0.5rem 0; transform: translate(-40%, 0px); box-shadow: 3px 3px 15px #696969; & li { display: block; margin: auto; text-align: center; padding: 1rem 0.5rem; } } @media (min-width: 768px) { .nav_list li { display: flex; justify-content: center; align-items: center; } } .nav_list li a:hover { color: #000; } .nav_list li a { position: relative; } .nav_list li a::after { background: #8f2255; content: ""; width: 100%; height: 2px; position: absolute; left: 0; bottom: -5px; margin: auto; transform-origin: right top; transform: scale(0, 1); transition: transform 0.3s; } .nav_list li a:hover:after { transform-origin: center top; transform: scale(1, 1); } @media (min-width: 767px) { .nav-logo { display: none; } } @media only screen and (max-width: 768px) { .header .logo { width: 200px; } .header .logo img { width: 100%; height: auto; object-fit: contain; } .nav_wrap { position: fixed; top: 0; right: 0; width: 100%; height: 100vh; padding: 60px 15px; background-color: #fff; transition: all 0.6s; z-index: 200; overflow-y: auto; transform: translateY(-100%); } .hamburger { position: absolute; right: 15px; top: 8px; width: 40px; height: 40px; cursor: pointer; z-index: 300; } .hamburger span { position: absolute; left: 11px; width: 25px; height: 3px; background-color: #8f2255; transition: all 0.6s; } .hamburger span:nth-child(1) { top: 16px; } .hamburger span:nth-child(2) { top: 23px; } .black_bg { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 100; background-color: #333; opacity: 0; visibility: hidden; transition: all 0.6s; cursor: pointer; } .nav-open .nav_wrap { transform: translateY(0); } .nav-open .black_bg { opacity: 0.8; visibility: visible; } .nav-open .hamburger span:nth-child(1) { transform: rotate(45deg); top: 20px; } .nav-open .hamburger span:nth-child(2) { transform: rotate(-45deg); top: 20px; } .nav-logo { text-align: center; } .nav-logo img { width: 40vw; } .nav_list { display: block; padding: 0; margin-top: 40px; } .nav_list li { margin-left: 0; } .nav_list li a { display: block; border-bottom: 1px solid #ebebeb; padding: 15px; position: relative; width: 100%; } .nav_list li:last-child a { border-bottom: none; } .nav_list li:first-child a { border-top: 1px solid #ebebeb; } .nav_list li a::before { position: absolute; content: ""; width: 25px; height: 25px; background-image: url(../img/btn_arr2.svg); background-repeat: no-repeat; background-size: contain; right: 15px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .nav_item_sub_open::before { transform: rotate(90deg) translateX(-50%) !important; } .nav_list li a::after { display: none; } #nav_item_sub_sp { padding-left: 2rem; } #nav_item_sub_sp .nav_item:first-child a { border-top: unset; } } /*** footer */ #footer { position: relative; padding-top: 139px; } #footer * { box-sizing: border-box; } .footer-nav li a { text-decoration: none; } footer .top_back { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; text-align: center; } .footer_inner { display: flex; flex-direction: column; align-items: center; } footer .sns_link_list { margin-bottom: 1rem; } .footer_text { margin-top: 3rem; } .footer_logo { margin-top: 3rem; margin-bottom: 90px; } footer hr { width: 100%; margin-top: 0; margin-bottom: 1rem; color: inherit; border: 0; border-top: 1px solid; opacity: .25; display: block; } .footer_copyright { color: #959595; font-size: 12px; line-height: 1.6; margin-bottom: 1rem; } @media (min-width: 767px) { .float_link_area { display: none; } } @media screen and (max-width: 768px) { footer { margin-bottom: 130px; } #footer { padding-top: 70px; } footer .top_back { top: 0; display: flex; justify-content: center; } footer .top_back img { width: 60px; } .float_link_area { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #65c443; z-index: 99; max-height: 150px; } .float_link_area_inner { display: flex; } .float_link_area a { display: block; flex: 1; } .float_link_area a img { height: auto; object-fit: contain; } .footer_logo { margin-bottom: 30px; } } @media screen and (max-width: 560px) { footer { margin-bottom: 80px; } } /* アニメーション */ .fadein { transform: translateY(30px); opacity: 0; visibility: hidden; transition: transform 1s, opacity 1s, visibility 1s; } .is-fadein { transform: translateX(0); opacity: 1; visibility: visible; } /* ══════════════════════════════════════════════ CreateBase 翻訳層 CSS style.css に追加してください ══════════════════════════════════════════════ */ .cb-translation { background: #fff; border: 0.5px solid #e8d5b0; border-left: 4px solid #c8922a; border-radius: 0 12px 12px 0; padding: 24px 28px 20px; margin: 0 0 36px; position: relative; overflow: hidden; } .cb-translation::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #c8922a, #f0d070, transparent); } .cb-eyebrow { font-size: 9px; letter-spacing: .22em; color: #c8922a; text-transform: uppercase; font-weight: 500; display: block; margin-bottom: 14px; } .cb-catch { font-family: 'Noto Serif JP', serif; font-size: 20px; font-weight: 700; color: #1e1208; line-height: 1.8; margin-bottom: 14px; } .cb-catch em { font-style: normal; color: #7a3010; background: linear-gradient(180deg, transparent 62%, rgba(200,146,42,.22) 62%); } .cb-divider { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; } .cb-divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(200,146,42,.4), transparent); } .cb-divider-dot { width: 4px; height: 4px; border-radius: 50%; background: #c8922a; flex-shrink: 0; } .cb-body { font-size: 14px; color: #4a3020; line-height: 1.95; font-weight: 300; } @media (max-width: 480px) { .cb-translation { padding: 18px 18px 16px; } .cb-catch { font-size: 17px; } } .cb-cta-btn { display: inline-block; margin-top: 18px; padding: 12px 28px; background: transparent; color: #b87820!important; text-decoration: none; border-radius: 3px; font-size: 12px; font-weight: 600; letter-spacing: .18em; border: 1px solid #b87820; transition: background 0.2s, color 0.2s; } .cb-cta-btn:hover { background: #b87820; color: #fff!important; } /* ── cb-summary 要約ブロック ── */ .cb-summary { margin: 0 0 32px; padding: 22px 26px 20px; background: #fff; border: 0.5px solid #e0cfa8; border-left: 4px solid #b87820; border-radius: 0 8px 8px 0; position: relative; } .cb-summary::before { content: '要約'; position: absolute; top: -1px; left: -1px; background: #b87820; color: #fff; font-size: 9px; letter-spacing: 0.2em; padding: 3px 10px; border-radius: 0 0 4px 0; } .cb-summary-catch { font-size: 16px; font-weight: 700; color: #1a0e06; line-height: 1.8; margin-bottom: 8px; padding-top: 8px; } .cb-summary-body { font-size: 13px; color: #5a4030; line-height: 1.9; }