/* Theme Name: Imaginary Studio Description: イマジナリースタジオのテーマ Version: 1.0 Author: imaginary-studio.jp Author URI: http://www.imaginary-studio.jp */ @charset "utf-8"; /* ::::: COMMON ::::: */ * { margin: 0; padding: 0; } body { margin: 0; padding: 0; color: #666; font: 15px / 1.7em "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; background: #fff; } a { color: rgb(1, 181, 190); outline: none; } a:link { color: rgb(1, 181, 190); text-decoration: none; outline: none; } a:visited { color: rgb(1, 181, 190); } a:hover { color: rgb(1, 181, 190); text-decoration: underline; } p, #notice dd { margin: 10px 0; } ul, li { list-style-type: none; } img { border: 0 none; } h1, h2, h3, h4, h5 { color: #777; font-weight: normal; } h1 { font-weight: bold; } table { border-collapse: collapse; } strong { font-weight: normal; } a.contents-internal-link { color: #666; text-decoration: none; } .flt-l { float: left; padding-right: 1em; } .flt-r { float: right; padding-left: 1em; } .fc-pink { color: #ff478e !important; } .fc-red { color: #FF6464 !important; } .fc-aqua { color: #31BEFF !important; } .fc-blue { color: #497FFF !important; } .fc-orange { color: #FF6C00 !important; } .fc-purple { color: #9600FF !important; } .fc-emrd_green { color: #2BCCAA !important; } .bgc-pink { background-color: #FFB3DA !important; } .bgc-yellow { background-color: #FFDB79 !important; } .bgc-aqua { background-color: #A1F5FF !important; } .bgc-purple { background-color: #DEA7FF !important; } .bgc-emrd_green { background-color: #8FEAB7 !important; } .mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .mb-2em { margin-bottom: 2em !important; } .mt-1em { margin-top: 1em !important; } .clear { clear: both; } .cf:before,.cf:after { content: ''; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } .hide { display: none; } /* タブ切り替え用 */ .mask { display: none !important; } /* -- reCaptcha v3 -- */ .grecaptcha-badge { visibility: hidden; } .recaptcha_policy { padding: 0 5px; margin: 50px 0 0 0; text-align: center; font-size: 11px !important; color: #999 !important; line-height: 18px; } /* hCaptcha */ .h-captcha { margin: 0 auto 50px !important; } /* -- テキスト白光彩 -- */ article.service .top>div, #original-song .arrange>div { text-shadow: 3px 0 4px #fff, 0 3px 4px #fff, -3px 0 4px #fff, 0 -3px 4px #fff, 0 0 3px #fff; } /* -- hover透過 -- */ #sitemap .list li a:hover, #recording .access img:hover, #flow-top li:hover { opacity: 0.7; transition: all 0.15s ease-in-out 0s; } /* -- 画像置換 -- */ nav.service a, nav.top ul li *, #header .logo a, footer dl dt, footer .logo *, footer .copyright, #top-point .pw section>p, #fxdBtn a.fb-contact, #fxdBtn .rpa:last-child { text-indent: 100%; white-space: nowrap; overflow: hidden; } #mix-point>div *, .trouble *, #top .intro * { position: relative; left: -200%; opacity: 0; } #demo .ipad li>*>span, #demo dt span, header.intro h2>span, article h3>span, .two-face-banner>ul>li>*>span { display: block; height: 0; opacity: 0; } /* -- Before & Afterブロック生成 -- */ #notice dd::before, #sitemap .list a::before, footer.wide-pic::after, .price .box::before, .price .option dl::before, .price .option dl::after, .pic-exp::before, .pic-exp::after, article.service .top>div::before, #demo .ipad li>*::before, #flow>.i>section>section::before, #flow>.i>section>section:not(:last-of-type)>div::before, #flow>.i>section>section:not(:last-of-type)>div::after, #flow>.i>section>section::after, #flow h4::before, #flow h4::after, #flow h3::before, #flow h3::after, #flow-top a::after, #flow-top li::before, #flow-top div::before, #privacy .main li::before, #privacy .main h3::before, form.wpcf7-form dd>div::after, .wpcf7-not-valid-tip::after, form.wpcf7-form .progress li::after, form.wpcf7-form dd::after, .contact-banner a span::after, .contact-banner .i::before, .contact-banner .btn-area::after, .contact-banner .btn-area::before, footer .body dt:before, footer .body dl dd:before, #top-point .pw::before, #top-point .pw section h4::before, .review::after, #breadcrumb::before, #sub-menu>li::before, #sub-menu>li::after, .widget-title::before, #column article h5::before { content: ''; display: block; position: absolute; } /* -- Picture Float Left -- */ .b4-after section>div::before, #pitch .performance div::before { content: ''; display: block; float: left; background: url('') no-repeat scroll left top / cover; } /* -- 縦中央揃え -- */ #demo .ipad ul, .contact-banner .txt-area>div, .contact-banner .btn-area, #fxdBtn [class^="icon-"] { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: relative; } #sitemap .list a::before, .price .box-area, .price .box::before, #privacy .main h3::before, form.wpcf7-form .progress li::after, form.wpcf7-form dd::after, .contact-banner .btn>* span::after, #flow h3::before, #flow h3::after, .search-submit, #sitemap .list li span, #column article h5::before { position: absolute; top: 0; bottom: 0; margin: auto; } /* -- 横中央揃え -- */ article.service .top>div::before, .price .option dl::before, .price .option dl::after, #demo .imac, #flow>.i>section>section:not(:last-of-type)>div::before, #flow>.i>section>section:not(:last-of-type)>div::after, #flow-top a::before, #flow-top a::after, #fxdBtn [class^="icon-"] { position: absolute; left: 0; right: 0; margin: auto; } /* -- 縦横中央揃え -- */ .loader, #demo .ipad li>*::before, #demo .text, .contact-banner .btn, #nav-clone nav.service ul, #flow-top li::before, #flow-top div, #flow-top div::before, #flow-top a, .store-preview-embed, .youtube_btn { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } /* ---- */ #wrap { overflow: hidden; } /*main { overflow: hidden; }*/ #top-bar, #header, #header.fixed .logo, article .i, body .i, header.intro h2, footer .body, footer .footer { width: 1020px; } header { height: 116px; margin-bottom: 40px; } #top-bar-wrap { height: 27px; width: 100%; background-color: rgb(0, 0, 0); position: fixed; z-index: 1000; border-bottom: 3px solid #F3407F; } #top-bar-wrap.scroll { opacity: 0.6; transition: all 0.15s ease-in-out 0s; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.5); } #top-bar-wrap.scroll:hover { opacity: 0.8; transition: all 0.15s ease-in-out 0s; } #top-bar { height: 100%; margin: 0 auto; position: relative; } #top-bar h1 { position: absolute; left: 0; font-size: 12px; color: rgb(153, 153, 153); height: 27px; line-height: 27px; } #top-bar-wrap.scroll h1 { display: none; } nav.top ul { width: 520px; height: 27px; position: absolute; top: 0; right: 0; } nav.top li { height: 27px; float: left; padding: 0; } nav.top a, nav.top span { height: 27px; display: block; outline: medium none; background: url('img/top-nav@2x.gif') no-repeat left top / auto 54px; transition: all 0.15s ease-in-out 0s; } nav.top .sitemap { width: 91px; } nav.top .demo { width: 72px; } nav.top .flow { width: 70px; } nav.top .faq { width: 57px; } nav.top .contact { width: 126px; } nav.top .about-us { width: 104px; } nav.top .sitemap * { background-position: left 0; } nav.top .demo * { background-position: -91px 0; } nav.top .flow * { background-position: -163px 0; } nav.top .faq * { background-position: -233px 0; } nav.top .contact * { background-position: -290px 0; } nav.top .about-us * { background-position: right 0; } nav.top .sitemap *:hover { background-position: left -27px; } nav.top .demo *:hover { background-position: -91px -27px; } nav.top .flow *:hover { background-position: -163px -27px; } nav.top .faq *:hover { background-position: -233px -27px; } nav.top .contact *:hover { background-position: -290px -27px; } nav.top .about-us *:hover { background-position: right -27px; } #header { height: 80px; margin: 0 auto; position: relative; top: 37px; } #header .logo { position: absolute; bottom: 0; left: 0; } #header .logo a, footer .logo * { display: block; width: 267px; height: 55px; background: url('img/logo@2x.png') no-repeat left top / 267px auto; overflow: hidden; } /* 共有 */ nav.service ul { position: absolute; bottom: 0; right: 0; height: 46px; } nav.service li { float: left; padding: 0; height: 46px; } nav.service a { display: block; height: 46px; overflow: hidden; margin-left: 50px; background: url('img/service-nav@2x.png') no-repeat left top / auto 138px; } nav.service .original-song a { background-position: left 0; width: 118px; margin-left: 0; } nav.service .arrange a { background-position: -118px 0; width: 72px; } nav.service .recording a { background-position: -190px 0; width: 96px; } nav.service .mixdown a { background-position: -286px 0; width: 96px; } nav.service .mastering a { background-position: right 0; width: 84px; } /* 本体のみ */ #header nav a { transition: all 0.15s ease-in-out 0s; } #header nav .original-song a:hover { background-position: left -46px !important; } #header nav .arrange a:hover { background-position: -118px -46px !important; } #header nav .recording a:hover { background-position: -190px -46px !important; } #header nav .mixdown a:hover { background-position: -286px -46px !important; } #header nav .mastering a:hover { background-position: right -46px !important; } /* コピーのみ */ #nav-clone nav .original-song a { background-position: left -92px } #nav-clone nav .arrange a { background-position: -118px -92px; } #nav-clone nav .recording a { background-position: -190px -92px; } #nav-clone nav .mixdown a { background-position: -286px -92px; } #nav-clone nav .mastering a { background-position: right -92px; } #nav-clone nav.hover { opacity: 0.8 !important; } #nav-clone nav.end { opacity: 1 !important; } #nav-clone nav { opacity: 0.6 !important; position: fixed; height: 56px; bottom: -56px; width: 100%; background: #000; z-index: 1000; } #nav-clone nav.service ul { width: 666px; height: 46px; } /* ---- */ #breadcrumb { overflow: hidden; width: 100%; font-size: 13px; line-height: 1em; margin-top: 8px; padding-left: 27px; position: relative; margin-bottom: 20px; } #breadcrumb::before { width: 31px; height: 31px; background: #ddd; border-radius: 16px; top: 0; left: 0; } #breadcrumb li { float: left; margin: 0 .5em 0 1em; } #breadcrumb li:first-of-type span { white-space: nowrap; opacity: 0; background: url('img/breadcrumb-home_on@2x.png') no-repeat center center / 24px auto; /* BGはダミー(読み込み対策) */ } #breadcrumb a { background: #ddd; padding: .7em 1em; float: left; text-decoration: none; color: #444; text-shadow: 0 1px 0 rgba(255,255,255,.5); position: relative; } #breadcrumb a:hover { background: #90F3EF; } #breadcrumb li:first-of-type a { width: 40px; background-image: url('img/breadcrumb-home_off@2x.png'); background-repeat: no-repeat; background-position: center center; background-size: 24px auto; } #breadcrumb li:first-of-type a:hover { background-image: url('img/breadcrumb-home_on@2x.png'); } #breadcrumb a::before { content: ''; position: absolute; top: 50%; margin-top: -1.5em; border-width: 1.5em 0 1.5em 1em; border-style: solid; border-color: #ddd #ddd #ddd transparent; left: -1em; } #breadcrumb a:hover::before { border-color: #90F3EF #90F3EF #90F3EF transparent; } #breadcrumb a::after { content: ''; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid #ddd; right: -1em; } #breadcrumb a:hover::after { border-left-color: #90F3EF; } #breadcrumb li.this-page { font-weight: bold; background: none; padding: .7em 0.5em; color: #444; } #breadcrumb li.this-page::after, #breadcrumb li.this-page::before { content: normal; } /*#breadcrumb li:last-of-type a, #breadcrumb li:last-of-type a:hover { font-weight: bold; background: none; } #breadcrumb li:last-of-type a::after, #breadcrumb li:last-of-type a::before { content: normal; }*/ #sub-menu { width: 570px; text-align: center; margin: 30px auto 0; } #sub-menu.m2 { width: 360px; } #sub-menu.m4 { width: 780px; } #sub-menu>li, #sub-menu>li::before { border-radius: 50%; box-shadow: rgba(113,135,164,.65098) 3px 3px 6px 3px; -webkit-box-shadow: rgba(113,135,164,.65098) 3px 3px 6px 3px; -moz-box-shadow: rgba(113,135,164,.65098) 3px 3px 6px 3px; } #sub-menu>li { width: 150px; height: 150px; float: left; position: relative;/* transition:1s; -moz-transition:1s; -webkit-transition:1s; */} #sub-menu>li>ul { height: 100%; } #sub-menu .sm-price { background: #e77fc5; } #sub-menu .sm-demo { background: #e9c04e; } #sub-menu .sm-review { background: #7f88e7; } #sub-menu .sm-free { background: #7cb60e; } /*#sub-menu>li:hover { background: #f83b66; -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }*/ #sub-menu>li::before { width: 56px; height: 56px; background: #fff; bottom: -7px; left: -7px; } #sub-menu>li::after { width: 32px; height: 32px; background: url('img/sub-menu-icon@2x.png') no-repeat scroll left top / auto 32px; bottom: 4px; left: 5px; } #sub-menu .sm-demo::after { background-position: -32px top; } #sub-menu .sm-review::after { background-position: -64px top; } #sub-menu .sm-free::after { background-position: right top; } #sub-menu>li:not(:first-of-type){ margin-left: 60px; } #sub-menu>li li:first-of-type a { display: block; width: 150px; height: 150px; color: #fff; } #sub-menu .sm-jp { position: absolute; top: 50px; left: 0; right: 0; font-size: 180%; font-weight: bold; } #sub-menu .sm-en { position: absolute; bottom: 40px; left: 0; right: 0; color: #ddd; font-size: 80%; } #sub-menu .sm-jp2r .sm-jp { top: 38px; } #sub-menu .sm-jp2r .sm-en { bottom: 27px; } article { width: 100%; /*padding-bottom: 40px;*/ } article .i, body .i { margin: 0 auto; } article h3 { background: url('') no-repeat scroll left top / auto 38px; height: 38px; overflow: hidden; margin: 0 auto; } article h3>span { padding-top: 38px; } article h4, #notice dt { text-align: center; font-size: 26px; height: 26px; } article h4::before, article h4::after, .price .option dd:first-of-type::before, .price .option dd:first-of-type::after, #notice dt::before, #notice dt::after { content: ''; display: inline-block; width: 25px; height: 1px; background: #bbb; margin-bottom: 0.3em; } article h4::before, .price .option dd:first-of-type::before, #notice dt::before { margin-right: 0.8em; } article h4::after, .price .option dd:first-of-type::after, #notice dt::after { margin-left: 0.8em; } header.intro { height: 100%; } header.intro>div:first-of-type { background: #eee; height: 250px; } header.intro h2 { background: url('') no-repeat left top / 1020px auto; height: 250px; overflow: hidden; } header.intro h2>span { padding-top: 250px; } header.sub-title { height: auto; } header.sub-title p { text-align: center; color: #a5a9aa; font-size: 22px; } footer.fixed { border-bottom: 56px solid #000; } footer .body-wrap { background: #ddd; } footer .body { margin-left: auto; margin-right: auto; padding-top: 40px; padding-bottom: 30px; } footer .company { width: 270px; height: 130px; background-color: rgb(244, 244, 244); padding: 30px; float: left; margin-right: 30px; } footer .logo { margin-bottom: 6px; } footer .logo:hover { background-color: #fff; box-shadow: 0 -8px 8px #fff,8px 0 8px #fff,0px 8px 8px #fff,-8px 0 8px #fff; } footer .description { color: rgb(153, 153, 153); font-size: 11px; font-weight: normal; } footer .name { margin-top: 0.5rem; font-size: 13px; font-weight: bold; color: #6C2F2F; } footer dl { float: left; width: 309px; min-height: 230px; padding-left: 0; padding-right: 20px; border-right: 1px solid #fff; } footer dt { position: relative; margin-bottom: 6px; } footer dt::before { position: absolute; top: 0; left: 32px; background: url('img/footer-nav-caption@2x.png') no-repeat left top / auto 15px; height: 15px; } footer .ft-option, footer .ft-support { margin-top: 20px; } footer .ft-service:before { background-position: left 0; width: 77px; } footer .ft-option:before { background-position: -77.5px 0; width: 75px; } footer .ft-detail:before { background-position: -153px 0; width: 66px; } footer .ft-support:before { background-position: right 0; width: 88px; } footer dl dd { position: relative; padding-left: 50px; line-height: 20px; color: rgb(102, 102, 102); font-weight: bold; margin-bottom: 5px; } footer dl dd::before { width: 0; height: 0; margin-top: -4px; top: 50%; left: 35px; border-left: 8px solid #FF96B7; border-top: 4px dashed transparent; border-bottom: 4px dashed transparent; } footer .body dd * { color: rgb(102, 102, 102); font-size: 14px; font-weight: normal; text-decoration: none; } footer .body dd *:hover { color: #fff; background-color: #9DDFE4; } footer .footer-wrap { height: 27px; margin: 0; padding: 0; background: #000; border-bottom: 3px solid #F3407F; } footer .footer { margin: 0 auto; position: relative; } footer .copyright { width: 344px; height: 27px; background: url('img/copyright@2x.png') no-repeat left top / auto 27px; margin: auto; } .contact-banner { background: #47C6C6; height:100px; border: 3px solid #47C6C6; color: #fff; } .contact-banner .i { height:100%; position: relative; background: url('img/contact-banner-airplane@2x.png') no-repeat left center / 50px auto; } .contact-banner .i::before { width: 168px; height: 150px; right: 0; bottom: -3px; background: url('img/contact-banner-woman@2x.png') no-repeat right top / auto 150px; z-index: 3; } .contact-banner .wrap { height: 100%; position: relative; overflow: hidden; } .contact-banner .txt-area { float:left; width: 460px; height: 100%; font-size:24px; padding-left: 72px; } .contact-banner .txt-area>div { position: absolute; } .contact-banner .txt-area p { margin: 6px 0; } .contact-banner .btn-area { width:400px; margin-left: 460px; height: 100%; background: #fff; position: absolute; } .contact-banner .btn-area::before, .contact-banner .btn-area::after { width: 200px; height: 200px; background: #fff; border-radius: 100px; top: -50px; z-index: 1; } .contact-banner .btn-area::before { left: -15px; } .contact-banner .btn-area::after { right: -15px; } .contact-banner .btn { width: 286px; height: 60px; z-index: 2; font-size: 20px; text-align: center; line-height: 60px; } .contact-banner .btn>* { display: block; width: 100%; height: 100%; position: absolute; background: #E9803D; border-radius: 4px; color: #fff; font-weight: bold; text-decoration: none; top: 0; left: 0; } .contact-banner .btn>*:hover { top: 3px; left: 3px; transition: all 0.15s ease-in-out 0s; } .contact-banner .btn>* span { position: relative; left: 9px; } .contact-banner .btn>* span::after { left: -1em; width: 6px; height: 6px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .two-face-banner { height: 160px; } .two-face-banner>ul { width: 920px; margin: auto; } .two-face-banner>ul>li>* { float: left; width: 430px; height: 160px; display: block; background: url('') no-repeat left top / cover; } .two-face-banner>ul>li:last-of-type>* { margin-left: 60px; } .two-face-banner .tfb-flow { background-image: url('img/2face-banner-flow@2x.jpg'); } .two-face-banner .tfb-faq { background-image: url('img/2face-banner-faq@2x.jpg'); } .two-face-banner .tfb-contact { background-image: url('img/2face-banner-contact@2x.jpg'); } #flow .two-face-banner { margin: 0 auto 120px; } #fxdBtn { display: none; } #fxdBtn a, #fxdBtn .rpa { display: block; position: fixed; bottom: 65px; z-index: 1000; } #fxdBtn a:first-child { right: 10px; } #fxdBtn a:first-child img { opacity: 0.6; display: block; } #fxdBtn a:first-child:hover img, #fxdBtn a.fb-contact:hover, #fxdBtn .rpa:last-child:hover { opacity: 1; } #fxdBtn a.fb-contact, #fxdBtn .rpa:last-child { width: 70px; height: 70px; border-radius: 100%; right: 90px; opacity: 0.8; background: #ff0075 url('img/contact-banner-airplane@2x.png') no-repeat 40% center / 45px auto; } #fxdBtn .fb-column-top { width: 70px; height: 70px; background: #000; border-radius: 100%; right: 90px; text-align: center; color: #fff; opacity: 0.38; font-size: 36px; } #fxdBtn .fb-column-top:hover { opacity: 0.6; } /*.youtube { position: relative; }*/ .youtube_play:hover { cursor: pointer; } .youtube_btn { width:42px; height:30px; background: url('img/yt-btn_128px.png') no-repeat scroll left top / auto 30px; opacity: 0.85; } .youtube_play [class^="icon-"] { position: absolute; top: 5px; left: 5px; font-size: 30px; color: #fff; background: rgba(0,0,0,0.35); padding: 5px 8px 3px; border-radius: 5px; opacity: 0.85; } .tab>ul { display: flex; justify-content: center; } .tab>ul>li.select{ border-bottom: 1px solid #fff; } .tab>ul>li { float: left; margin: 0 2px -1px 0; padding: 10px; border: 1px solid #bbb; border-radius: 3px 3px 0 0; cursor: pointer; } .tab { border-bottom: 1px solid #ccc; } .store-preview-embed { width: 300px; height: 170px; } .store-preview-info { overflow: hidden; } .store-preview-img { float: left; padding: 10px; } .store-preview-meta { padding: 10px; white-space: nowrap; } .store-preview-meta .store-preview-title { font-size: 110%; font-weight: bold; margin-bottom: 10px; } .store-preview-audio { width: 100%; height: 30px; } .table, .table dl { width: 100%; } .table dl, .table dt, .table dd { float: left; } .table dt, .table dd { padding: 12px 25px; } .table { margin: 0 auto; } .table dl { border-bottom: 2px solid #eee; } .table dl:last-of-type { border-bottom: none; } .table dl:first-of-type dt { border-top: 3px solid #c9c9c9; } .table dl:first-of-type dd { border-top: 3px solid #abfff9; } .table dl:last-of-type dt { border-bottom: 3px solid #c9c9c9; } .table dl:last-of-type dd { border-bottom: 3px solid #FFBFFC; } .table dt { font-weight: bold; color: #6EB5BF; } .table dt a { color: #6EB5BF; text-decoration: underline; } .table.c2 dt { width: 220px; } .table.c2 dd { width: 700px; } .table dd.contact img { margin-top: 5px; } .table dd.contact::after{ content: '\A(基本的にはメールでの対応になりますのでご了承下さい。)'; white-space: pre; } .brand-name { float: right; display: none; } .sp-only { display: none; } /* モバイルのみ表示 */ /* 全体の間隔調整 MB 35px */ #notice dt, #mix-point>p, article h3, article h4, .price .main, #faq>.i>p, #contact .step3>div>p:last-of-type, #privacy .main>p:first-of-type, #privacy .main section:not(:last-of-type), header.sub-title { margin-bottom: 35px; } /* MT 60px */ .price .option, .two-face-banner { margin-top: 60px } /* MB 60px */ #notice dl, #recording .access h3, section>figure:not(:last-child), article>.i>section>div:not(:last-child), header.intro, article>.i>section>section:not(:last-child), article>section>section:not(:last-of-type), .review>p, .price .option h4, .b4-after>p, #demo h3, #flow h3, #flow>.i>p:first-of-type, form.wpcf7-form .progress, #contact .step2, #about-us>.i>section>div, .tab, .post-content, .post-footer, .sidebar, .blog-list:last-of-type .blog-list-container, .search-form-main { margin-bottom: 60px; } /* MB 100px */ #notice dl:last-of-type, #sitemap .list, article>.i>section, article>section, .contact-banner, .table, #top .intro, #demo>.i>p:last-of-type, #flow-top, #contact .step1, form.wpcf7-form, .tab-c>li>section { margin-bottom: 100px; } /* -- */ /* ::::: COMMON CONTENTS ::::: */ article.service .top { background: url('') no-repeat scroll right top 133px / auto; } article.service .top>div { width: 100%; position: relative; } article.service .top>div::before { background: url('') no-repeat scroll left top / auto; z-index: -1; opacity: 0.25; } article.service .trouble { width: 100%; height: 463px; background: url('') no-repeat scroll left top / cover; } footer.wide-pic { position: relative; width: 900px; height: 350px; margin-left: auto; margin-right: auto; } footer.wide-pic::after { top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 0 20px #fff, inset 0 0 20px #fff, inset 0 0 20px #fff, inset 0 0 20px #fff; } footer.wide-pic img { vertical-align: bottom; } .trouble h3 { background: none; width: 100%; } .price { overflow: hidden; } #wrap .price h3, #wrap .b4-after h3, #wrap .review h3 { background-image: url('img/common-h@2x.gif'); } #wrap .price h3 { background-position: -195px top; width: 158px; } .price>p { text-align: center; } .price .main { width: 100%; height: 450px; background: url('img/price-woman@2x.jpg') no-repeat scroll right top / auto 450px; position: relative; } .price .box-area { width: 600px; height: 140px; } .price .box-area.two { height: 300px; } .price .box { width: 584px; height: 124px; color: #FFAD00; border: 8px solid #FFAD00; position: relative; } .price .box:nth-of-type(2) { color: #e8380d; border-color: #e8380d; } .price .box:not(:last-of-type) { margin-bottom: 20px; } .price .box::before { width: 80px; height: 80px; left: 30px; background: url('img/price-box-icon@2x.png') no-repeat scroll left top / auto 80px; } .price .box:nth-of-type(2):before { background-position: right top; } .price .list-price { font-weight: bold; position: absolute; text-align: center; left: 85px; right: 0; bottom: 30px; } .price .list-price span:first-of-type { font-size: 26px; } .price .list-price span:nth-of-type(2) { font-size: 65px; } .price .list-price span:last-of-type { font-size: 35px; } /* for Animation */ /*.price .main { background-position: right 450px; } .price .box { left: 2000px; } *//* -- */ .price .option li { float: left; width: 300px; height: 360px; background: #E949A1; color: #fff; margin: 15px 0 0 15px; padding: 15px; text-align: center; position: relative; border-radius: 14px; } .price .option li:nth-of-type(-n+3) { margin-top: 0; } .price .option li:nth-of-type(3n+1) { margin-left: 0; } .price .option dl { position: relative; height: 100%; } .price .option dl::before { width: 120px; height: 120px; background: #fff; border-radius: 100%; } .price .option dl::after { top: 27px; width: 90px; height: 66px; background: url('img/price-option-icon@2x.png') no-repeat scroll left top / auto 66px; } .price .option .instruments dl::after { background-position: -90px top; width: 64px; } .price .option .score dl::after { background-position: -154px top; width: 46px; } .price .option .media dl::after { background-position: -200px top; width: 78px; } .price .option .para dl::after { background-position: -278px top; width: 93px; } .price .option .compose dl::after { background-position: -371px top; width: 57px; } .price .option .ddp dl::after { background-position: -428px top; width: 45px; } .price .option .karaoke dl::after { background-position: -473px top; width: 59px; } .price .option .pitch dl::after { background-position: -532px top; width: 100px; } .price .option .rhythm dl::after { background-position: -632px top; width: 44px; } .price .option .simple-mix dl::after { background-position: -676px top; width: 66px; } .price .option .simple-mast dl::after { background-position: -742px top; width: 67px; } .price .option .noise dl::after { background-position: -808px top; width: 106px; } .price .option dt { font-weight: bold; padding-top: 135px; margin-bottom: 10px; font-size: 17px; } .price .option dd:first-of-type { font-size: 16px; margin-bottom: 10px; } .price .option dd:first-of-type::before, .price .option dd:first-of-type::after { width: 18px; background: #fff } .price .option dd:nth-of-type(2) { font-size: 13px; line-height: 1.7em; margin-bottom: 10px; } .price .option dd:nth-of-type(3) { width: 170px; height: 40px; background: #fff; border-radius: 8px; color: #E949A1; margin: auto; position: absolute; bottom: 0; left: 0; right: 0; } .price .option dd:nth-of-type(3) span { display: block; height: 100%; line-height: 40px; font-weight: bold; font-size: 18px; } .price .option dd:nth-of-type(3) a { opacity: 0; height: 100%; width: 100%; display: block; position: absolute; top: 0; } .price .option dd a { color: #9600FF; } /* for Animation */ /* ulに固定のheightを設定しないと後段のオーディオプレーヤーを再生した時、捌けておいたピクセル分の空白が出来てしまう謎の現象がWin&Mac&AndroidのFirefoxのみで発生する。原因はfloat。 */ /*.price .option ul { height: 350px } .price .option ul.r2 { height: 715px } .price .option ul.r3 { height: 1080px } .price .option li { position: relative; opacity: 0; } .price .option li:nth-of-type(4n+1) { top: -5000px; } .price .option li:nth-of-type(4n+2) { top: 5000px; } .price .option li:nth-of-type(4n+3) { left: -5000px; } .price .option li:nth-of-type(4n+4) { left: 5000px; }*/ /* -- */ #wrap .b4-after h3 { background-position: right top; width: 310px; } .b4-after>p { text-align: center; } /* レビュー 領域等はトップページ基準 */ .review { position: relative; } .review::after { background: url('img/review-bg-megahonn@2x.png') no-repeat right top / 146px auto; width: 146px; height: 152.5px; top: -30px; right: 30px; opacity: 0.1; } .review .cards { min-height: 960px; } .review .cards { position: relative; } .review .rate { text-align: right; font-size: 12px; color: #AEAEAE; height: 0; opacity: 0; margin-bottom: 0 !important; } #wrap .review h3 { width: 195px; } .review>p { text-align: center; border-bottom: 1px solid #E7E7E7; padding-bottom: 45px; } .card-wrap { position: absolute; } .review .r1 { -webkit-transform: rotate(1deg); transform: rotate(1deg); top: 0; left: 0; } .review .r2 { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); top: 50px; left: 500px; } .review .r3 { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); top: 510px; right: 480px; } .review .r3 .card { width: 430px; } .review .r4 { -webkit-transform: rotate(1deg); transform: rotate(1deg); top: 550px; right: 0; } .review .r4 .card { width: 350px; } .review h4 { font-size: 15px; font-weight: bold; border-bottom: 1px solid #C1C1C1; line-height: 30px; height: auto; margin: auto; } .review h4::before, .review h4::after { content: none; } .review .sig { text-align: right; margin: 5px 0 0; color: #AEAEAE; } .review .sig+p { margin-top: -4px; } .review .card>section { margin: auto; } .review .card>section>section { display: none; } .review .card>section>section>h5 { text-align: right; font-size: 14px; font-weight: bold; padding-top: 5px;border-top: 1px solid #C1C1C1; } .review .card>section>section>h5+p { margin-top: 0; } #wrap #original-song .arrange h3, #wrap #arrange .tech h3, #wrap .service>.i>section.detail h3 { background-position: right top; } .pic-exp { width: 800px; height: 314px; position: relative; margin: 0 auto; } .pic-exp::before, .pic-exp::after { background: url('img/pic-exp-woman@2x.jpg') no-repeat scroll left top / 214px auto; } .pic-exp::before { width: 214px; height: 314px; right: 0; } .pic-exp::after { width: 168px; height: 22px; top: 12px; right: 96px; -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } .pic-exp figcaption { position: absolute; color: #fff; font-style: italic; text-shadow: 2px 2px 2px #444; font-size: 14px; z-index: 1; } .pic-exp img { position: absolute; vertical-align: bottom; } .pic-exp p { width: 540px; color: #888; font-size: 19px; font-weight: bold; line-height: 1.7em; position: absolute; bottom: 0; left: 0; text-align: center; } /* ::::: TOP ::::: */ #top .intro { width: 100%; height: 516px; background: url('img/top-intro@2x.jpg') no-repeat left top / 1020px auto; } #top .trouble { width: 100%; height: 780px; background: url('img/top-trouble@2x.jpg') no-repeat left top / 1020px auto; } #top-point { color: #fff; } #top-point h3 { background: url('img/top-point-h@2x.gif') no-repeat left top / auto 41px; width: 731px; height: 41px; } #top-point h3>span { padding-top: 41px; } #top-point .pw { position: relative; height: 400px; overflow: hidden; } #top-point .p1 { background: #333; } #top-point .p2 { background: #2AD4D4; } #top-point .p3 { background: #E157A5; } #top-point .p4 { background: #FFB049; } #top-point .p5 { background: #1E8B8F; padding-bottom: 24px; } #top-point .pw::before { top: -20px; width: 101%; height: 35px; border-bottom: #fff solid 2px; } #top-point .p2::before, #top-point .p4::before { -webkit-transform: rotate(1deg); transform: rotate(1deg); } #top-point .p3::before, #top-point .p5::before { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } #top-point .p2::before { background: #333; } #top-point .p3::before { background: #2AD4D4; } #top-point .p4::before { background: #E157A5; } #top-point .p5::before { background: #FFB049; } #top-point .p1::before { content: none; } #top-point .pw .bgtxt { display: block; position: absolute; width: 64px; height: 400px; top: 0; background: url('img/top-point-bgtxt@2x.png') no-repeat left top / auto 400px; opacity: 0.5; z-index: 1; } #top-point .p1 .bgtxt, #top-point .p3 .bgtxt, #top-point .p5 .bgtxt { left: 5px; } #top-point .p2 .bgtxt, #top-point .p4 .bgtxt { right: 5px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } #top-point .p1 .bgtxt { top: -4px; } #top-point .p2 .bgtxt { background-position: -64px top; top: 15px; } #top-point .p3 .bgtxt { background-position: -128px top; top: 15px; } #top-point .p4 .bgtxt { background-position: -192px top; top: 15px; } #top-point .p5 .bgtxt { background-position: right top; top: 26px; } #top-point .pw .i { height: 400px; position: relative; } #top-point .p2 .i, #top-point .p3 .i, #top-point .p4 .i { padding-top: 32px; } #top-point .p1 .i { background: url('img/top-point-piano@2x.jpg') no-repeat right center / auto 300px; } #top-point .p2 .i { background: url('img/top-point-economy@2x.jpg') no-repeat left center / auto 300px; } #top-point .p3 .i { background: url('img/top-point-solution@2x.jpg') no-repeat right center / auto 300px; } #top-point .p4 .i { background: url('img/top-point-creditcard@2x.jpg') no-repeat left center / auto 300px; } #top-point .p5 .i { background: url('img/top-point-violin-score@2x.jpg') no-repeat right 70% / auto 300px; } #top-point .pw section { position: absolute; } #top-point .pw h4 { position: relative; left: 80px; font-size: 30px; height: 70px; line-height: 70px; color: #fff; text-align: left; margin: auto; } /* for Animation */ /*#top #top-point .p1 h4, #top #top-point .p3 h4, #top #top-point .p5 h4 { left: 2000px; } #top #top-point .p2 h4, #top #top-point .p4 h4 { left: -2000px; } #top #top-point .p1 .i, #top #top-point .p3 .i, #top #top-point .p5 .i { background-position: right 2000px; } #top #top-point .p2 .i, #top #top-point .p4 .i { background-position: left 2000px; } #top #top-point .pw .bgtxt { top: -400px; }*/ /* -- */ #top-point .pw h4::before { width: 65px; height: 65px; top: 0; left: -80px; background: url('img/top-point-h-icon@2x.png') no-repeat left top / auto 65px; margin: auto; } #top-point .pw h4::after { content: none; } #top-point .p2 h4::before { background-position: -65px top; } #top-point .p3 h4::before { background-position: -130px top; } #top-point .p4 h4::before { background-position: -195px top; } #top-point .p5 h4::before { background-position: right top; } #top-point .p1 section { width: 500px; top: 85px; } #top-point .p2 section { width: 570px; top: 85px; margin-left: 450px; } #top-point .p3 section { width: 500px; top: 85px; } #top-point .p4 section { width: 535px; top: 85px; margin-left: 485px; } #top-point .p5 section { width: 480px; top: 85px; } #top-point .pw section .d1::before { display: block; margin-top: 10px; } #top-point .p1 section .d1::before { content: '経験豊富なプロのクリエイターが音楽制作のノウハウを活かして、一段とクオリティの高い作品に仕上げます。開業以来多方面のお客様にご愛顧され、そのような経験から様々なスタイルに対応することが出来ます。'; } #top-point .p2 section .d1::before { content: '当サイトで掲載されている料金は通常料金になります。この料金は当スタジオがクオリティと金額とのバランスを考慮した上でのプランですが、お客様によってはご予算に合わない場合もございます。その場合はご予算をお聞きした上、可能な作業範囲や内容を検討した上でご予算に沿った制作も可能です。'; } #top-point .p3 section .d1::before { content: '楽曲を制作していく上で、判断に困った場合やどうすれば良いか分からなくて意見が欲しいといった場合、ご相談頂ければアドバイスをさせて頂きます。あくまで意見の一つとしてではありますが、音楽の専門家としての見地から一つのご参考になると思います。'; } #top-point .p4 section .d1::before { content: '支払い方法は銀行振込の後払いになります。前払いではありませんので、特に初めての方にも安心してご依頼を頂くことが出来ます。当スタジオはインターネットを利用したオンラインでのやり取りがメインですので、ご安心頂けるように配慮をしております。'; } #top-point .p5 section .d1::before { content: 'ウェブサイトに掲載されている制作作業以外にも、様々なご案件を承ります。今までのご依頼例としては、既存曲のMIDI制作、データ変換、部分的な編曲、出張レコーディングなどがあります。また、音楽制作以外にもアーティスト様のホームページを制作することも出来ます。'; } /* ::::: ORIGINAL SONG ::::: */ #original-song>header h2 { background-image: url('img/original-song-intro@2x.jpg'); } #original-song h3 { background-image: url('img/original-song-h@2x.gif'); width: 472px; } #original-song .top { background-image: url('img/original-song-top@2x.jpg'); background-size: 440px auto; } #original-song .top div { width: 560px; } #original-song .top div::before { background-image: url('img/original-song-top-bg@2x.jpg'); background-size: 345px auto; width: 345px; height: 394px; top: -36px; } #original-song .arrange { background: url('img/original-song-arrange@2x.jpg') no-repeat scroll left top 44px / 500px auto; } #original-song .arrange h3 { width: 355px; } #original-song .arrange div { padding-left: 400px; } #original-song .trouble { background-image: url('img/original-song-trouble@2x.jpg'); } /* ::::: ARRANGE ::::: */ #arrange>header h2 { background-image: url('img/arrange-intro@2x.jpg'); } #arrange h3 { background-image: url('img/arrange-h@2x.gif'); width: 510px; } #arrange .top { background: url('img/arrange-top@2x.jpg') no-repeat scroll right bottom / 500px auto; } #arrange .top div { width: 580px; } #arrange .top div::before { background: url('img/arrange-top-bg@2x.jpg') no-repeat scroll left top / 398.5px auto; width: 398.5px; height: 384px; top: -72px; left: 65px; right: auto; } #arrange .tech { background: url('img/arrange-tech@2x.jpg') no-repeat scroll left top 72px / 480px auto; } #arrange .tech div { padding-left: 500px; } #arrange .pic-exp::after { background-position: right -314px; } #arrange .pic-exp figcaption { left: 340px; top: 176px; } #arrange .pic-exp img { left: 40px; } #arrange .trouble { background-image: url('img/arrange-trouble@2x.jpg'); } /*#arrange .price .option li, #original-song .price .option li { height: 320px; }*/ #arrange .b4-after section>div::before { background-image: url('img/arrange-b4-after@2x.jpg'); width: 375px; height: 333px; } #arrange .review .cards { min-height: 980px; } #arrange .review .r2 { left: 520px; } #arrange .review .r3 { right: 570px; } #arrange .review .r3 .card { width: 360px; } #arrange .review .r4 { top: 540px; } #arrange .review .r4 .card { width: 460px; } /* ::::: RECORDING ::::: */ #recording>header h2 { background-image: url('img/recording-intro@2x.jpg'); } #wrap #recording section:not(.trouble) h3 { background-image: url('img/recording-h@2x.gif'); } #recording .top { background-image: url('img/recording-top@2x.jpg'); background-size: auto 188px; } #recording .top h3 { width: 432px; } #recording .top div { width: 710px; } #recording .top div::before { content: none; } #recording .trouble { background-image: url('img/recording-trouble@2x.jpg'); } #recording .price h3 { background-position: right top; width: 350px; } /*#recording .price .option ul { height: 835px; } #recording .price .option li:nth-of-type(-n+3) { height: 400px; } #recording .price .option li:nth-last-of-type(-n+2) { height: 360px; } */ #recording .access h3 { background-position: -432px top; width: 433px; } #recording .access h3+* { display: block; float: right; } #recording .access img { border-radius: 20px; vertical-align: bottom; } #recording .access>section { text-align: center; } /* ::::: MIXDOWN ::::: */ #mixdown>header h2 { background-image: url('img/mixdown-intro@2x.jpg'); } #mixdown h3 { background-image: url('img/mixdown-h@2x.gif'); width: 579px; } #mixdown .top { background-image: url('img/mixdown-top@2x.jpg'); background-size: auto 265px; } #mixdown .top div { width: 700px; } #mixdown .top div::before { background-image: url('img/mixdown-top-bg@2x.jpg'); background-size: 250px auto; width: 250px; height: 312px; top: -34px; } #mixdown .detail { background: url('img/mixdown-detail@2x.jpg') no-repeat scroll left top 90px / 240px auto; } #wrap #mixdown .detail h3 { width: 554px; background-position: -579px top; } #mixdown .detail div { padding-left: 265px; } #mixdown .pic-exp::after { background-position: right bottom; } #mixdown .pic-exp figcaption { left: 330px; top: 179px; } #mixdown .pic-exp img { left: 80px; } #mixdown .trouble { background-image: url('img/mixdown-trouble@2x.jpg'); } /*#mixdown .price .option ul { height: 1160px; } #mixdown .price .option li:nth-of-type(-n+3) { height: 400px; } */ #mix-point h3 { width: 856px; background-position: right top; } #mix-point h3+p { text-align: center; } #mix-point>div { width: 100%; height: 500px; background: url('img/mixdown-point@2x.jpg') no-repeat scroll left top / cover; } #mixdown .review .cards { min-height: 900px; } #mixdown .review .r1 { top: 20px; left: 10px; } #mixdown .review .r2 { top: 0; left: 530px; } #mixdown .review .r2 .card { width: 435px; } #mixdown .review .r3 { top: 470px; right: 0; } #mixdown .review .r3 .card { width: 390px; } #mixdown .review .r4 { top: 520px; right: 490px; } #mixdown .review .r4 .card { width: 440px; } /* ::::: PITCH CORRECT ::::: */ #pitch>header h2 { background-image: url('img/pitch-intro@2x.jpg'); } #pitch h3 { background-image: url('img/pitch-h@2x.gif'); width: 474px; } #pitch .top { background-image: url('img/pitch-top@2x.jpg'); background-size: auto 188px; } #pitch .top>div::before { background-image: url('img/pitch-top-bg@2x.jpg'); background-size: 250px auto; width: 250px; height: 298px; top: -62px; } #pitch .top>div:first-of-type { width: 710px; } #pitch .performance div::before { background-image: url('img/pitch-performance@2x.jpg'); width: 400px; height: 288px; margin-right: 20px; margin-bottom: 20px;} #pitch .detail { background: url('img/pitch-detail@2x.jpg') no-repeat scroll right top 72px / 400px auto; } #pitch .detail h3 { width: 539px; } #pitch .detail div { width: 600px; } #pitch .trouble { background-image: url('img/pitch-trouble@2x.jpg'); } /* ::::: RHYTHM CORRECT ::::: */ #rhythm>header h2 { background-image: url('img/rhythm-intro@2x.jpg'); } #rhythm h3 { background-image: url('img/rhythm-h@2x.gif'); width: 508px; } #rhythm .top { background-image: url('img/rhythm-top@2x.jpg'); background-size: auto 240px; } #rhythm .top div { width: 640px; } #rhythm .top div::before { background-image: url('img/rhythm-top-bg@2x.jpg'); background-size: auto 300px; width: 177px; height: 300px; top: -32px; left: 9px; } #rhythm .detail h3 { width: 355px; } #rhythm .trouble { background-image: url('img/rhythm-trouble@2x.jpg'); } /* ::::: MASTERING ::::: */ #mastering>header h2 { background-image: url('img/mastering-intro@2x.jpg'); } #mastering h3 { background-image: url('img/mastering-h@2x.gif'); width: 460px; } #mastering .top { background-image: url('img/mastering-top@2x.jpg'); background-size: 600px auto; } #mastering .top div { width: 770px; } #mastering .top div::before { background-image: url('img/mastering-top-bg@2x.jpg'); background-size: 460px auto; width: 460px; height: 289px; bottom: -75px; left: -70px; right: auto; } #mastering .detail { background: url('img/mastering-detail@2x.jpg') no-repeat scroll left top 90px / 240px auto; } #mastering .detail h3 { width: 396px; } #mastering .detail div { padding-left: 265px; } #mastering .trouble { background-image: url('img/mastering-trouble@2x.jpg'); } #mastering .review .cards { min-height: 430px; } #mastering .review .r1 { top: 0; left: 22px; } #mastering .review .r1 .card { width: 470px; } #mastering .review .r2 { top: 20px; left: 615px; } #mastering .review .r2 .card { width: 320px; } /* ::::: DDP ::::: */ #ddp>header h2 { background-image: url('img/ddp-intro@2x.jpg'); } #ddp .top { background-image: url('img/ddp-top@2x.jpg'); background-size: 350px auto; } #ddp h3 { background-image: url('img/ddp-h@2x.gif'); width: 636px; } #ddp .top div { margin: 70px 0 90px; width: 650px; } #ddp .top div::before { content: none; } #ddp .trouble { background-image: url('img/ddp-trouble@2x.jpg'); } #ddp .review .cards { min-height: 390px; } #ddp .review .r1 { top: 20px; left: 10px; } #ddp .review .r1 .card { width: 435px; } #ddp .review .r2 { top: 0; left: 550px; } /* ::::: SITEMAP ::::: */ #sitemap>header h2 { background-image: url('img/sitemap-intro@2x.jpg'); } #sitemap .list { background: url('img/sitemap-list-bg@2x.jpg') no-repeat scroll right 60px bottom / 500px auto; } #sitemap .list>ul { float: left; } /*#sitemap .list>ul:not(:first-of-type) li a { margin-left: 60px; }*/ #sitemap .list>ul:not(:first-of-type) li { margin-left: 60px; } #sitemap .list>ul>li:not(:first-of-type) a { margin-top: 14px; } #sitemap .list>ul:first-of-type a { background: #56CFE9; } #sitemap .list>ul:first-of-type>li>ul>li>a { background: #71C9ED; } #sitemap .list>ul:nth-of-type(2) a { background: #888; } #sitemap .list>ul:last-of-type a { background: #E949A1; } #sitemap .list a { display: block; width: 300px; padding: 20px 0; border-radius: 8px; text-align: center; font-size: 18px; line-height: 18px; color: #fff; text-decoration: none; font-weight: bold; position: relative; } #sitemap .list a::before { width: 24px; height: 28px; left: 10px; background: url('img/sitemap-icon@2x.png') no-repeat scroll left top / auto 28px; } #sitemap .list a[href$='/arrange/']::before { background-position: -24px top; width: 39px; } #sitemap .list a[href$='/recording/']::before { background-position: -63px top; width: 19px; } #sitemap .list a[href$='/mixdown/']::before { background-position: -82px top; width: 28px; } #sitemap .list a[href$='/pitch-correct/']::before { background-position: -110px top; width: 42px; } #sitemap .list a[href$='/rhythm-correct/']::before { background-position: -152px top; width: 18px; } #sitemap .list a[href$='/mastering/']::before { background-position: -170px top; width: 28px; } #sitemap .list a[href$='/ddp/']::before { background-position: -198px top; width: 19px; } #sitemap .list a[href$='/demo/']::before { background-position: -217px top; width: 20px; } #sitemap .list a[href$='/flow/']::before { background-position: -237px top; width: 31px; } #sitemap .list a[href$='/faq/']::before { background-position: -268px top; width: 16px; } #sitemap .list a[href$='/notice/']::before { background-position: -284px top; width: 25px; } #sitemap .list a[href$='/sitemap/']::before { background-position: -309px top; width: 28px; } #sitemap .list a[href$='/about-us/']::before { background-position: -337px top; width: 28px; } #sitemap .list a[href$='/contact/']::before { background-position: -365px top; width: 48px; } #sitemap .list a[href$='/privacy-policy/']::before { background-position: -413px top; width: 20px; } #sitemap .list a[href$='/transaction-law/']::before { background-position: -433px top; width: 22px; } #sitemap .list li span { font-size: 30px; line-height: 0; height: 0; left: 10px; z-index: 1; color: #fff; } #sitemap .list .column a::before { content: none; background: none; } #sitemap .list>ul>li>ul>li>a { left: 10px; font-weight: normal; } /* for Animation */ /*#wrap #sitemap .list { position: relative; background-position: right -2000px; } #sitemap .list li { position: relative; opacity: 0; } #sitemap .list li:nth-of-type(4n+1) { top: -2000px; } #sitemap .list li:nth-of-type(4n+2) { top: 2000px; } #sitemap .list li:nth-of-type(4n+3) { left: -2000px; } #sitemap .list li:nth-of-type(4n+4) { left: 2000px; }*/ /* -- */ /* アニメーション解除用 */ #wrap #sitemap .list { position: relative; } #sitemap .list li { position: relative; } /* ::::: DEMO ::::: */ #demo>header h2 { background-image: url('img/demo-intro@2x.jpg'); } #demo h3 { background-image: url('img/demo-h@2x.gif'); width: 134px; } #demo .apples { float: left; width: 480px; height: 480px; position: relative; background: #ccc; border-radius: 100%; margin: 40px auto 0; } #demo .apples:nth-of-type(-n+2) { margin-top: 0; } #demo .apples:nth-of-type(3n+2) { margin-left: 60px; } #demo .apples:nth-of-type(3n) { margin-left: 270px; } #demo .apples:nth-of-type(1n) { background-color: #ccc; } /* Gray */ #demo .apples:nth-of-type(2n) { background-color: #FFB3DA; } /* Pink */ #demo .apples:nth-of-type(3n) { background-color: #FFDB79; } /* Yellow */ #demo .apples:nth-of-type(4n) { background-color: #A1F5FF; } /* Aqua */ #demo .apples:nth-of-type(5n) { background-color: #DEA7FF; } /* Purple */ #demo .apples:nth-of-type(6n) { background-color: #8FEAB7; } /* EmrdGreen */ #demo .imac, #demo .mbp, #demo .ipad, #demo .works dt, #demo .detail dt, #demo .itunes>*::before, #demo .amazon>*::before { background: url('img/demo-movie@2x.png') no-repeat scroll left top / 640px auto; } #demo .imac { top: 48px; width: 380px; height: 305px; } #demo .yt { position: relative; height: 227px; } #demo .yt iframe, #demo .youtube_play img, #demo .no-image { position: absolute; top: 15px; left: 16px; border: 0; } #demo .youtube_play img { top: 15.5px; } #demo .youtube_play [class^="icon-"] { top: 20px; left: 21px; } #demo .mbp { position: absolute; left: 0; bottom: 43px; width: 260px; height: 153px; background-position: right top; } #demo .mbp.center { right: 0; margin: auto; } #demo .display { margin: 8px auto auto 34px; width: 194px; height: 121px; font-size: 12px; line-height: 1.4em; position: relative; } #demo .text { width: 96%; height: 35px; } #demo .works dt { width: 80px; height: 16px; background-position: left bottom; } #demo .works li { float: left; } #demo .works li:not(:last-of-type)::after { content: '/'; } #demo .detail dt { width: 79px; height: 16px; background-position: -80px bottom; } #demo dt, #demo dl:not(:last-of-type) { margin-bottom: 5px; } #demo dt span { padding-top: 16px; } #demo .ipad { position: absolute; right: 0; bottom: 48px; width: 170px; height: 120px; background-position: right -153px; } #demo .ipad ul { width: 126px; height: 60px; margin: auto; } #demo .ipad ul.one { width: 60px; } #demo .ipad li>* { display: block; width: 60px; height: 60px; border-radius: 100%; float: left; margin-left: 6px; position: relative; } #demo .ipad li:first-of-type>* { margin-left: 0; } #demo .ipad li>*>span { padding-top: 60px; } #demo .itunes>* { background: #aaa; } #demo .amazon>* { background: #f8971c; } #demo .itunes>*::before { width: 32px; height: 38px; background-position: right bottom; } #demo .amazon>*::before { width: 36px; height: 38px; background-position: right -32px bottom; } #demo .text.wd-r2 { height: 78px; } #demo .text.wd-r3 { height: 94px; } #demo .text.wd-r4 { height: 110px; } #demo .text.w-r2 { height: 52px; } #demo .music-store h3 { background-position: -134px top; width: 132px; } #demo .audio h3 { background-position: right top; width: 165px; } #demo>.i>p:last-of-type { text-align: center; font-size: 14px; color: #888; } /* ::::: FLOW ::::: */ #flow>header h2 { background-image: url('img/flow-intro@2x.jpg'); } #flow>.i>p:first-of-type { text-align: center; } #flow-top { height: 240px; } /* for Animation */ /*#flow-top li { top: -1000px; }*/ /* -- */ #flow-top li:first-of-type { margin-left: 0; } #flow-top li, #flow-top div { background: url('img/flow-top@2x.jpg') no-repeat scroll left top / auto 240px; border-radius: 100%; } #flow-top li:nth-of-type(2) { background-position: -240px top; } #flow-top li:nth-of-type(3) { background-position: -480px top; } #flow-top li:nth-of-type(4) { background-position: right top; } #flow-top li:first-of-type div { background-position: -8px -8px; } #flow-top li:nth-of-type(2) div { background-position: -248px -8px; } #flow-top li:nth-of-type(3) div { background-position: -488px -8px; } #flow-top li:nth-of-type(4) div { background-position: -728px -8px; } #flow-top li { width: 240px; height: 240px; position: relative; float: left; margin-left: 20px; } #flow-top li::before { background: #fff; width: 232px; height: 232px; border-radius: 100%; } #flow-top div { width: 224px; height: 224px; position: absolute; overflow: hidden; } #flow-top div::before { width: 100%; height: 60px; background: #000; opacity: 0.55; } #flow-top a { display: block; position: absolute; width: 100%; height: 100%; text-align: center; font-weight: bold; font-size: 19px; line-height: 224px; color: #fff; text-decoration: none; } #flow-top a::before { content: 'case'; position: absolute; top: -65px; text-shadow: 0 0 3px #444; font-weight: normal; font-size: 17px; } #flow-top a::after { background: url('img/flow-top-icon@2x.png') no-repeat scroll left top / auto 40px; width: 40px; height: 40px; bottom: 20px; } #flow-top li:nth-of-type(2) a::after { background-position: -40px top; } #flow-top li:nth-of-type(3) a::after { background-position: -80px top; } #flow-top li:nth-of-type(4) a::after { background-position: right top; } #flow h3 { width: 76px; height: 52px; background: url('img/flow-h@2x.gif') no-repeat scroll left top / auto 52px; overflow: visible; position: relative; } #flow-arrange h3 { background-position: -76px top; } #flow-vo-rec h3 { background-position: -152px top; width: 437px; } #flow-mix-mst h3 { background-position: right top; width: 434px; } #flow h3 span { padding-top: 52px; } #flow h3::before, #flow h3::after { width: 80px; height: 1px; background: #bbb; } #flow h3::before { left: -120px; } #flow h3::after { right: -120px; } #flow>.i>section>section { position: relative; min-height: 220px; } #flow>.i>section>section:not(:last-of-type) { border-bottom: 1px solid #ddd; } #flow>.i>section>section::before { width: 130px; height: 130px; background: #000; border-radius: 100%; left: 0; top: 0; opacity: 0.55; z-index: 1; } #flow #flow-arrange section::before { background: #1DD2D2; } #flow #flow-vo-rec section::before { background: #E947DB; } #flow #flow-mix-mst section::before { background: #2EC600; } #flow>.i>section>section::after, #flow h4::after { background: url('img/flow-main@2x.png') no-repeat scroll left top / 396px auto; } #flow>.i>section>section::after { width: 66px; height: 66px; top: 33px; left: 33px; z-index: 1; } #flow>.i>section>section:nth-of-type(3)::after, #flow #flow-arrange section:nth-of-type(5)::after { background-position: -66px top; } #flow>.i>section>section:last-of-type::after { background-position: -132px top; } #flow #flow-compose section:nth-of-type(2)::after, #flow #flow-arrange section:nth-of-type(2)::after, #flow #flow-arrange section:nth-of-type(4)::after { background-position: -198px top; } #flow #flow-vo-rec section:nth-of-type(2)::after { background-position: -264px top; left: 42px; } #flow #flow-mix-mst section:nth-of-type(2)::after { background-position: -330px top; } #flow>.i>section>section>div { padding: 20px 0 60px 335px; } #flow>.i>section>section:not(:last-of-type)>div::before { width: 78px; height: 20px; background: #fff; bottom: -10px; } #flow>.i>section>section:not(:last-of-type)>div::after { bottom: -8px; width: 0; height: 0; border-top: 16px solid #aaa; border-left: 26px dashed transparent; border-right: 26px dashed transparent; border-bottom: 0; } #flow h4 { font-size: 30px; margin-bottom: 20px; text-align: left; height: auto; } #flow h4::before, #flow h4::after { margin: auto; } #flow h4::before { background: #ccc; left: 84px; top: 60px; width: 220px; height: 90px; } #flow h4::after { top: 87px; left: 108px; width: 175px; height: 36px; background-position: left -66px; } #flow>.i>section>section:nth-of-type(2) h4::after { background-position: left -102px; } #flow>.i>section>section:nth-of-type(3) h4::after { background-position: left -138px; } #flow>.i>section>section:nth-of-type(4) h4::after { background-position: left -174px; } #flow>.i>section>section:nth-of-type(5) h4::after { background-position: left -210px; } #flow>.i>section>section:nth-of-type(6) h4::after { background-position: left bottom; } #flow .line { width: 320px; margin: 0 auto 120px; } #flow .line li:first-of-type { margin-left: 0; } #flow .line li { float: left; margin-left: 40px; width: 20px; height: 20px; background: #60C1FF; border-radius: 100%; } /* ::::: FAQ ::::: */ #faq>header h2 { background-image: url('img/faq-intro@2x.jpg'); } #faq>.i>p { text-align: center; } #faq .faq-list>section:not(:last-of-type) { margin-bottom: 20px; } .faq-list h3 { width: 236px; background-image: url('img/faq-h@2x.gif'); } .faq-list.work h3 { background-position: -236px top; } .faq-list.request h3 { background-position: -472px top; width: 271px; } .faq-list.other h3 { background-position: right top; width: 116px; } article .faq-list>section h4 { position: relative; cursor: pointer; font-size: 20px; min-height: 26px; height: auto; line-height: 26px; margin: auto; text-align: left; padding: 12px 47px 12px 56px; background: transparent linear-gradient(to bottom, #FFF 0%, #FFF 80%, #F4F4F4 100%) repeat scroll 0% 0%; border: 1px solid #E8E8E8; color: #606060; } article .faq-list>section h4:hover { background: transparent linear-gradient(to bottom, #fff 0%, #EDFFFB 80%, #EDFFFB 100%) repeat scroll 0% 0%; } article .faq-list>section h4::before, .faq-list>section h4::after { display: block; position: absolute; color: #FFF; text-align: center; font-weight: bold; margin: auto; } article .faq-list>section h4::before { content: "Q"; width: 36px; height: 36px; line-height: 36px; top: 7px; left: 12px; background: #88E3F2; font-size: 22px; border-radius: 100%; } article .faq-list>section h4::after { content: "+"; width: 34px; height: 34px; line-height: 34px; top: 8px; right: 12px; background: #FFC2E1; font-size: 26px; border-radius: 5px; } .faq-list>section.open h4::after { content: "-"; } .faq-list>section>div { display: none; } .faq-list>section>div>p:first-of-type { margin-top: 20px; } .faq-list>section>div>p:last-of-type { margin-bottom: 30px; } #full-open, #full-close { position: fixed; opacity: 0.6; bottom: 10px; width: 114px; padding: 13px; background: #B336FF; text-align: center; font-size: 20px; font-weight: bold; border-radius: 10px; color: #fff; cursor: pointer; } #full-open:hover, #full-close:hover { opacity: 0.8; } #full-open { left: 10px; } #full-close { left: 160px; } /* ::::: CONTACT ::::: */ #contact>header h2 { background-image: url('img/contact-intro@2x.jpg'); } #contact .step1 { position: relative; margin-top: -10px; height: 350px; background: url('img/contact-top@2x.jpg') no-repeat right top / auto 350px; } #contact .step1 p, #contact .step2 p { color: #777; font-size: 19px; font-weight: bold; line-height: 1.7em; } #contact .step1 p { width: 650px; position: absolute; top: 50px; left: 5px; } #contact .step1 ul { position: absolute; font-size: 12px; bottom: 20px; left: 0; background: #000; opacity: 0.6; color: #fff; padding: 5px 10px; box-shadow: 0 0 5px 0 #777; } #contact .step1 li { line-height: 1.7em; margin: 5px 0; } #contact .step1 li::before, form.wpcf7-form dd>div::before, .wpcf7-not-valid-tip::before { content: '※'; color: #f00; margin-right: 3px; } #contact .step2 { text-align: center; } #contact .step3 { min-height: 415px; background: url('img/contact-top-thanks@2x.jpg') no-repeat right -20px top 25px / 330px auto; } #contact .step3>div { width: 690px; } #contact .step3 h3 { width: 674px; background-image: url('img/contact-top-thanks-h@2x.gif'); } /* プログレスは旧システム用。もしCF7が確認画面に対応したら再使用予定 */ form.wpcf7-form .progress { width: 100%; } form.wpcf7-form .progress li { width: 33.3333%; float: left; position: relative; } form.wpcf7-form .progress li::after, form.wpcf7-form dd::after { background: url('img/form-icon@2x.png') no-repeat left bottom / 240px auto; } form.wpcf7-form .progress li::after { width: 32px; height: 32px; left: 10px; } form.wpcf7-form .progress li:nth-of-type(2)::after { background-position: -32px bottom; } form.wpcf7-form .progress li:last-of-type::after { background-position: -64px bottom; } form.wpcf7-form .progress li>div { padding: 7px; margin-right: 1px; background-color: #E0E0E0; color: #666; text-align: center; } form.wpcf7-form .progress .now>div { background-color: #56CFE9; color: #FFF; } form.wpcf7-form .progress li>div>div:nth-of-type(2) { font-size: 116%; line-height: 116%; font-weight: bold; } form.wpcf7-form dl, form.wpcf7-form dt { float: left; } form.wpcf7-form dl { width: 490px; padding: 10px; margin-bottom: 25px; } form.wpcf7-form .parts-wrap { margin-bottom: 50px; } form.wpcf7-form dt, form.wpcf7-form dd { height: 20px; padding: 10px; border-bottom: 1px solid #9F9F9F; } form.wpcf7-form dt { width: 150px; white-space: nowrap; border-bottom: 1px solid #2EE9E2; } form.wpcf7-form .must dt { border-color: #FF69CE; } form.wpcf7-form .focus dt { border-color: #53EA04; transition: all 0.2s ease-in-out 0s; } form.wpcf7-form dd { float: right; position: relative; width: 300px; } form.wpcf7-form dd::after { width: 24px; height: 24px; right: 10px; } form.wpcf7-form .notes dd { height: auto; } form.wpcf7-form .name dd::after { background-position: left top; } form.wpcf7-form .company dd::after { background-position: -24px top; } form.wpcf7-form .sex dd::after { background-position: -48px top; } form.wpcf7-form .address dd::after { background-position: -72px top; } form.wpcf7-form .tel dd::after { background-position: -96px top; } form.wpcf7-form .mail dd::after, form.wpcf7-form .mail_conf dd::after { background-position: -120px top; } form.wpcf7-form .ask dd::after { background-position: -144px top; } form.wpcf7-form .notes dd::after { background-position: -168px top; top: 10px; bottom: auto; } form.wpcf7-form .url dd::after { background-position: -192px top; } form.wpcf7-form .kwd dd::after { background-position: right top; } /* CF7関係 form dd>div, form .notes dd>div は旧システムで使用 */ form dd>div, .wpcf7-not-valid-tip { position: absolute; bottom: 46px; left: -20px; background: #888; color: #fff; padding: 10px; border-radius: 6px; opacity: 0.8; white-space: nowrap; } form .notes dd>div, form.wpcf7-form .notes .wpcf7-not-valid-tip { bottom: auto; top: -52px; } form.wpcf7-form dd>div::after, .wpcf7-not-valid-tip::after { bottom: -10px; left: 25px; width: 0; height: 0; border-top: 10px solid #888; border-left: 10px dashed transparent; border-right: 10px dashed transparent; border-bottom: 0; } div.wpcf7-recaptcha>div { margin: 0 auto 50px; } div.wpcf7-display-none, div.wpcf7-mail-sent-ok { display: none; } /* 送信完了ページを表示するため非表示 */ div.wpcf7-mail-sent-ok { border: 3px solid #398f14; } div.wpcf7-mail-sent-ng { border: 3px solid #ff0000; } div.wpcf7-spam-blocked { border: 3px solid #ffa500; } div.wpcf7-validation-errors { border: 3px solid #f7e700; } div.wpcf7-response-output { margin-bottom: 100px; padding: 0.5em; text-align: center; font-weight: bold; font-size: 120%; } div.wpcf7 .screen-reader-response { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; margin: 0; padding: 0; border: 0; } form.wpcf7-form dd>div>span { color: #f00; margin-right: 3px; } form.wpcf7-form .address, form.wpcf7-form .ask, form.wpcf7-form .notes { width: 1000px; } form.wpcf7-form .address dd, form.wpcf7-form .ask dd, form.wpcf7-form .notes dd { width: 810px; } form.wpcf7-form input[type="radio"] { opacity: 0; position: absolute; } form.wpcf7-form input[type="text"], form.wpcf7-form input[type="tel"], form.wpcf7-form input[type="email"], form.wpcf7-form input[type="url"], form.wpcf7-form input[type="number"], form.wpcf7-form textarea { font-size: 16px; cursor: pointer; border: medium none; outline: medium none; padding: 0 5px; } form.wpcf7-form input[type="text"], form.wpcf7-form input[type="tel"], form.wpcf7-form input[type="email"], form.wpcf7-form input[type="url"], form.wpcf7-form input[type="number"] { width: 265px; } form.wpcf7-form #postcode1 { width: 32px; } form.wpcf7-form #postcode2 { width: 42px; padding-right: 12px; } form.wpcf7-form #postcode2+span { border-left: 1px solid #ccc; } form.wpcf7-form #address { width: 640px; padding-left: 17px; } form.wpcf7-form textarea { width: 770px; line-height: 19px; } form.wpcf7-form input::-webkit-input-placeholder { color: #bbb; } form.wpcf7-form input:-moz-placeholder { color: #bbb; } form.wpcf7-form input::-moz-placeholder { color: #bbb; } form.wpcf7-form input:-ms-input-placeholder { color: #bbb; } form.wpcf7-form .sex label, form.wpcf7-form .ask label { background: url('img/form-radio@2x.png') no-repeat scroll left top / 20px auto; height: 20px; line-height: 20px; cursor: pointer; overflow: hidden; display: block; float: left; padding-left: 26px; margin: 0 0 5px; } form.wpcf7-form .sex label { width: 114px; } form.wpcf7-form .ask label { padding-right: 30px; } form.wpcf7-form .sex label.on, form.wpcf7-form .ask label.on { background-position: left bottom; } form.wpcf7-form .address, form.wpcf7-form .btn-wrap { clear: both; } form.wpcf7-form .btn-wrap { margin: 0 auto; text-align: center; } form.wpcf7-form .btn-wrap .btn { width: 230px; height: 48px; border-radius: 24px; border: none; font-size: 18px; font-weight: bold; cursor: pointer; font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",Arial,Helvetica,Verdana,sans-serif; -webkit-box-shadow: 0 0 2px rgba(10,2,4,.23); box-shadow: 0 0 2px rgba(10,2,4,.35); -webkit-appearance: none; } form.wpcf7-form .btn-wrap .white { color: #898989; background: #fff; } form.wpcf7-form .btn-wrap .white:hover { background: #F8F8F8; transition: all 0.2s ease-in-out 0s; } form.wpcf7-form .btn-wrap .aqua { color: #fff; background: #5EC6FF; } form.wpcf7-form .btn-wrap .aqua:hover { background: #28B3FF; transition: all 0.2s ease-in-out 0s; } form.wpcf7-form .btn-wrap .l { margin-right: 50px; } form.wpcf7-form .btn-wrap .r { margin-left: 50px; } /* 旧システム form.confirm dd { word-break: break-all; } form.confirm dd span { padding-right: 30px; } form.confirm .url dd, form.confirm .kwd dd { height: auto; } form.confirm .url dd::after, form.confirm .kwd dd::after { top: 10px; bottom: auto; } form.confirm .notes dd, form.confirm .url dd, form.confirm .kwd dd { padding-bottom: 4.5px; }*/ /* ::::: ABOUT US ::::: */ #about-us>header h2 { background-image: url('img/about-us-intro@2x.jpg'); } #about-us>.i>section { background: url('img/about-us-top@2x.jpg') no-repeat scroll right 78px / 420px auto; } #about-us>.i>section h3 { background-image: url('img/about-us-h@2x.gif'); width: 554px; } #about-us>.i>section>div { width: 600px; } /* ::::: NOTICE ::::: */ #notice>header h2 { background-image: url('img/notice-intro@2x.jpg'); } #notice dd { position: relative; padding-left: 26px; } #notice dd::before { left: 11px; width: 7px; height: 7px; background: #1CEFE7; -webkit-transform: rotate(-45deg) ; transform: rotate(-45deg); top: 8px; } #notice dl:nth-of-type(2) dd::before { background: #FF54BB; } #notice dl:nth-of-type(3) dd::before { background: #FFB505; } #notice dl:nth-of-type(4) dd::before { background: #D653FF; } #notice dl:last-of-type dd::before { background: #58EAA2; } /* ::::: PRIVACY POLICY ::::: */ #privacy>header h2 { background-image: url('img/privacy-intro@2x.jpg'); } #privacy .main { margin-bottom: 90px; } #privacy .main h3 { position: relative; height: 22px; font-size: 22px; padding-left: 28px; margin-bottom: 20px; background: none; } #privacy .main h3::before { left: 0; width: 20px; height: 20px; background: #97FFF0; border-radius: 4px; } #privacy .main>p:first-of-type { text-align: center; } #privacy .main ol { margin: 15px auto auto 3px; } #privacy .main li { margin: 3px auto; position: relative; padding-left: 20px; text-decoration: underline; } #privacy .main li::before { top: 0.4em; left: 0; width: 8px; height: 8px; background-color: #FFF; border: 2px solid #F99EFF; border-radius: 100%; } /* ::::: LAW ::::: */ #law>header h2 { background-image: url('img/law-intro@2x.jpg'); } /* ::::: COLUMN ::::: */ #column #breadcrumb { margin-top: 0; } #column main { float: left; width: 670px; } /* 65.64% */ .sidebar { float: right; width: 320px; } /* 31.28% */ #column h2, #column h3, #column h4, #column h5, .nf-title { font-family: 'Noto Sans JP', sans-serif; color: #606060; } #column h2.post-title { font-size: 32px; line-height: 1.2em; margin: 20px auto 15px; border-bottom: 1px solid #ddd; padding-bottom: 16px; } #column article h3 { /* init */ background: none; height: auto; overflow: visible; margin: auto; } #column article h3 { font-size: 28px; line-height: 1.3em; padding: 0 0 8px 26px; position: relative; margin: 1.2em 0; clear: both; border-bottom: 2px solid #ddd; } #column article h3::before, #column article h3::after, #column article h4::before, #column article h4::after { content: ''; position: absolute; display: block; margin: 0; } #column article h3::before { background: #80d4b8; top: -10px; left: 7px; height: 15px; width: 15px; transform: rotate(45deg); } #column h3::after { background: #94efd5; top: 8px; left: 2px; height: 10px; width: 10px; transform: rotate(15deg); } #column article h4 { /* init */ text-align: left; height: auto; margin-bottom: auto; } #column article h4 { position: relative; margin: 1.2em auto; padding: 0 0 6px 32px; border-bottom: solid 1px #ddd; line-height: 1.3em; } #column article h4::before { left: 7px; top: 32%; height: 16px; width: 16px; background-color: rgba(255, 0, 85, 0.3); } #column article h4::after { left: 0; top: 22%; height: 14px; width: 14px; background-color: rgba(206, 18, 81, 0.3); transform: rotate(-30deg); } #column article h5 { font-size: 24px; margin: 1em auto; position: relative; padding-left: 15px; } #column article h5::before { width: 8px; height: 8px; background: #ab9bfe; left: 0; transform: rotate(45deg); } .article-tags { font-size: 12px; line-height: 18px; float: left; } .article-tags .fa { margin-right: 5px; color: #444; } .article-tags+* { clear: both; } .cat-color { float: right; line-height: 12px; } .cat-color li { float: left; } .cat-color li:not(:last-of-type) { margin-right: 5px; } .cat-color a { color: #fff; font-size: 12px; line-height: 18px; color: #fff; background-color: #ea6b66; padding: 0 6px; display: inline; word-break: break-all; text-decoration: none; } .cat-theme1 a { background-color: #21759b !important } .cat-theme2 a { background-color: #f39768 !important } .cat-theme3 a { background-color: #a8d4b8 !important } .cat-theme4 a { background-color: #000 !important } .cat-test a { background-color: #efc94c !important } .mibun a { background-color: #b47157 !important } .post-header { height: auto; margin-bottom: 50px; } .post-thumbnail { width: 100%; text-align: center; margin: 60px auto -15px; clear: both; line-height: 0; } .post-content { clear: both; } #column blockquote { background: #eee; margin: 1.5em 0; padding: 25px 55px; position: relative; } #column blockquote::before, #column blockquote::after { font-family: 'IcoMoon-Free'; color: #fff; font-size: 40px; line-height: 1; position: absolute; } #column blockquote::before { content: '\e977'; left: 8px; top: 4px; } #column blockquote::after { content: '\e978'; right: 8px; bottom: 4px; } #column ol { margin: 20px auto 20px 20px; } #column ol li { list-style: outside decimal; font-weight: bold; margin: 10px auto; } #column ol li span { font-weight: normal; } .table-h-1row-1col { width: 100%; text-align: center; margin: 30px auto; } .table-h-1row-1col, .table-h-1row-1col td, .table-h-1row-1col th { border-collapse: collapse; } .table-h-1row-1col td, .table-h-1row-1col th { padding: 3px; width: 30px; height: 25px; } .table-h-1row-1col td:not(:last-of-type) { border-right: 1px solid #ddd; } .table-h-1row-1col th { background: #a8def0; color: #fff; } .table-h-1row-1col th:nth-child(even) { background: #8bd1e9; } .table-h-1row-1col tr:nth-child(odd) td { background: #f2f2f2; } .table-h-1row-1col tr:not(:first-of-type) th { background: #efb9f0; font-weight: bold; color: #fff; } .table-h-1row-1col tr:not(:first-of-type):nth-child(odd) th { background: #e492e6; } .navigation{ clear: both; } .navigation>div { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .navigation>div+div { border-top: 0; border-bottom: 1px solid #ddd; } .navigation .alignright { text-align: right; } .navigation a { display: block; padding: 1em; border: none; } .navigation a span { color:#bbb; padding-right:10px; margin-top:-4px; clear:left; } .navigation a:hover { background: #eee; } .navigation .alignright a:hover { border-left: 1px solid #ddd; } #prev-next { width:100%; margin: 0 0 24px; padding:0; display: table; } #prev-next #prev, #prev-next #next { width: 50%; display: table-cell; position:relative; text-decoration:none; } #prev-next #prev:hover, #prev-next #next:hover { background-color: rgba(238,238,238,0.7); } #prev-next #prev { border-right:#ddd 1px solid; } #prev-next #prev-title, #prev-next #next-title { top:0; bottom: 0; position:absolute; margin: auto; border: 1px #bbb solid; text-align: center; padding:5px; color:#666; font-size:28px; border-radius:100%; background-color: #fff; width: 23px; height: 23px; opacity: 0.9; } #prev-next #prev-title { left:-3px; } #prev-next #next-title { right:-3px; } #prev-next span { position: absolute; padding:0; margin:0; top: 3px; } #prev-next #prev-title span { left: 10px; } #prev-next #next-title span { right: 10px; } #prev-next #prev img, #prev-next #next img { margin:0 auto; width: 100px; height: 100px; } #prev-next #prev-no, #prev-next #next-no { width: 50%; padding:0 10px; display: table-cell; } #prev-next #prev-no { border-right:#ddd 1px solid; } #prev-no, #next-no { position:relative; } #prev-no a:hover, #next-no a:hover { background-color:#fff; } #prev-next-home span { color:#ccc; font-size:55px; margin:0 auto; position:absolute; top:50%; left:50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* IE10以降に適用されるCSSハック（一応）*/ @media all and (-ms-high-contrast:none){ #prev-next-home span { margin-top: 50px; } } #prev-next #prev, #prev-next #prev::before, #prev-next #prev::after, #prev-next #next, #prev-next #next::before, #prev-next #next::after { box-sizing: border-box; } #prev-next #prev img { float:left; margin-right:10px } #prev-next #next img { float:right; margin-left: 10px; } /* Pタグで英文で改行されない対策 */ #prev-next p { word-wrap: break-word; width: 190px; } #prev-next #prev p { padding-left: 114px; } #column .youtube { line-height: 0; text-align: center; margin: 35px auto; } #column .youtube_play { position: relative; display: inline-block; } /* ::::: COLUMN SIDEBAR ::::: */ .sidebar { position: relative; } .sb-section-wrap.fixed { position: fixed; top: 40px; width: inherit; } .widget-container:not(:last-of-type) { margin-bottom: 40px; } .widget-title { position: relative; margin-bottom: 20px; font-size: 28px; line-height: 1.1em; padding-bottom: 10px; } .widget-title::before { left: 0; bottom: 0; width: 100%; height: 2px; background-image: -webkit-linear-gradient(left, rgba(130, 213, 201, 1), rgba(255,255,255,0)); background-image: -moz-linear-gradient(left, rgba(130, 213, 201, 1), rgba(255,255,255,0)); background-image: -ms-linear-gradient(left, rgba(130, 213, 201, 1), rgba(255,255,255,0)); background-image: -o-linear-gradient(left, rgba(130, 213, 201, 1), rgba(255,255,255,0)); } .widget-title.wt-pink::before { background-image: -webkit-linear-gradient(left, rgba(233, 142, 231, 1), rgba(255,255,255,0)); background-image: -moz-linear-gradient(left, rgba(233, 142, 231, 1), rgba(255,255,255,0)); background-image: -ms-linear-gradient(left, rgba(233, 142, 231, 1), rgba(255,255,255,0)); background-image: -o-linear-gradient(left, rgba(233, 142, 231, 1), rgba(255,255,255,0)); } .widget-title.wt-blue::before { background-image: -webkit-linear-gradient(left, rgba(130, 134, 213, 1), rgba(255,255,255,0)); background-image: -moz-linear-gradient(left, rgba(130, 134, 213, 1), rgba(255,255,255,0)); background-image: -ms-linear-gradient(left, rgba(130, 134, 213, 1), rgba(255,255,255,0)); background-image: -o-linear-gradient(left, rgba(130, 134, 213, 1), rgba(255,255,255,0)); } #wc-recent-posts a { display: block; } #wc-recent-posts li:not(:last-of-type) a { margin-bottom: 10px; } #wc-recent-posts img { width: 75px; height: 75px; padding: 2px; border: solid 1px #ccc; float: left; margin-right: 8px; } #wc-recent-posts p.title { margin-top: 2px; margin-bottom: 0; } .search-field, .search-submit { border: 0; outline: 0; background: 0 0; box-shadow: none; border-radius: 0; } .search-field { width: 100%; height: 36px; background: 0 0; border: 1px solid #aaa; border-radius: 1.1rem; color: #aaa; padding: .3rem 2rem .3rem 1rem; box-sizing: border-box; } .search-form input[type="search"] { -webkit-appearance: textfield; } .search-form button, .search-form input { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .search-field:placeholder-shown { color: #bbb; /*font-size: .9rem; line-height: 1.7;*/ } .search-field::-webkit-input-placeholder { color: #bbb; } .search-field:-moz-placeholder { color: #bbb; } .search-field::-moz-placeholder { color: #bbb; } .search-field:-ms-input-placeholder { color: #bbb; } .search-form { position: relative; } .search-submit i { width: 1rem; font-size: 17px; } .search-submit { height: 100%; right: 0; border: 1px solid transparent; background-color: transparent; color: #aaa; box-shadow: none; padding: .5rem 1rem .5rem .5rem; } .search-field, .highlight { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; } .search-field:focus, .highlight { border-color: rgba(255, 135, 253, 0.8) !important; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 135, 253, 0.6) !important; -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 135, 253, 0.6) !important; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 135, 253, 0.6); outline: 0; outline: thin dotted \9; } /* ::::: COLUMN INDEX ::::: */ .blog-list { position: relative; width: 100%; text-align: left; padding-bottom: 3px; margin-bottom: 0; /* init */ } .blog-list-container { overflow: hidden; *zoom: 1; border: 1px solid #ccc; border-radius: 8px; text-decoration: none; padding: 20px; margin-bottom: 20px; position: relative; box-shadow: rgba(0,0,0,0.07) 3px 3px 4px 0; -webkit-box-shadow: rgba(0,0,0,0.07) 3px 3px 4px 0; -moz-box-shadow: rgba(0,0,0,0.07) 3px 3px 4px 0; } .blog-list-txt { width: 55%; float: right; padding-bottom: 40px; } .blog-list-txt .cat-color { position: absolute; top: 20px; left: 20px; } .blog-list-txt .cat-color a { display: block; line-height: 20px; opacity: 0.9; } .blog-list-txt .cat-color a:hover { opacity: 1; } .blog-list-txt .cat-color li:not(:last-of-type) { margin-right: 0; } .blog-list-txt .article-tags { float: none; } #column .blt-title { font-family: inherit; } .blt-title { line-height: 1.4em; font-weight: bold; font-size: 138.5%; margin-bottom: 0.5em; } .blt-desc { line-height: 140%; margin-top: 0; margin-bottom: 0.8em; } .blt-more { position: absolute; bottom: 20px; right: 20px; /* フォント差分 */ margin: 0 0 3px 0; } .blt-more a { border: solid 1px #aaa; padding: 6px 8px; color: #666; text-decoration: none; background: #fff; } .blt-more a:hover { color: #fff; background-color: #555; border-color: #555; } .blt-more i { margin-right: 4px; } .blog-list-img { width: 40%; float: left; line-height: 0; } .blog-list-img img { max-width: 100%; height: auto; } /* ::::: PAGENATION ::::: */ .pn { clear: both; position: relative; font-size: 14px; line-height: 14px; text-align: center; margin-bottom: 60px; } .pn-box { display: inline-block; } .pn span, .pn a { display: block; float: left; text-decoration: none; padding: 10px 15px 10px 15px; width: auto; color: #999; border: solid 1px #999; } .pn span, .pn a:not(:last-of-type) { margin-right: 4px; } .pn a:hover{ color: #fff; background: #666; border-color: #666; } .pn .current{ padding: 10px 15px 10px 15px; background: #666; border-color: #666; color: #fff; } /*@media only screen and (max-width: 413px) { .pn { font-size: 12px; line-height: 12px; } .pn span, .pn a { padding: 8px 10px 8px 10px; } .pn .current{ padding: 8px 10px 8px 10px; } }*/ /* ::::: 404 or Not Found ::::: */ .nf-title { font-size: 32px; } .nf-title, .nf-desc, .nf-img { text-align: center; margin-bottom: 30px; } .nf-img img { width: 50%; height: auto; padding-top: 30px; } .search-form-main .search-form { width: 70%; margin: 0 auto; } /* ::::: エラー表示 ::::: */ #display-errors { width: 1020px; margin: 50px auto 0; font-weight: bold; font-size: 120%; position: fixed; top: 0; left: 0; right: 0; background: #fff; opacity: 0.9; z-index: 1000; } #display-errors li { padding: 0.5em 2em 0.5em 0.5em; border: 3px solid #ff0000; position: relative; } #display-errors li span { cursor: pointer; display: block; position: absolute; border: solid 1px #666; width: 30px; height: 30px; right: 5px; text-align: center; line-height: 30px; font-size: 12px; border-radius: 7px; top: 5px; font-style: normal; } #display-errors li:not(:last-of-type) { margin-bottom: 15px; }