@charset "utf-8"; /* Theme Name:realize Theme URI: Description: Author: Author URI: Version:4.0.2 */ /* -------------------------------------------------------------------------------- web fonts　ウェブフォントファイルを変更した場合はv=1.0の数字を変更（キャッシュ対策） -------------------------------------------------------------------------------- */ @font-face { font-family: 'design_plus'; src: url('fonts/design_plus.eot?v=1.0'); src: url('fonts/design_plus.eot?v=1.0#iefix') format('embedded-opentype'), url('fonts/design_plus.woff?v=1.0') format('woff'), url('fonts/design_plus.ttf?v=1.0') format('truetype'), url('fonts/design_plus.svg?v=1.0#design_plus') format('svg'); font-weight: normal; font-style: normal; } /* ---------------------------------------------------------------------- basic setting ---------------------------------------------------------------------- */ a img { border:none; verticle-align:top; } a, a:visited { outline:none; color:#333; } a:hover { color:#fff; } p { margin:0 0 1.5em 0; padding:0; line-height:200%; } ul { list-style-type:none; margin:0 0 2em 0; padding:0; line-height:0%; } ul li { margin:0; padding:0; line-height:normal; zoom:1; } ol { margin:0 0 2em 19px; padding:0; } ol li { padding:0 0 5px 0; line-height:normal; } dl { list-style-type:none; margin:0 0 1em 0; padding:0; line-height:0%; } dl dt, dl dd { margin:0; padding:0; line-height:normal; zoom:1; } dl dt { font-weight:bold; } form,table,input,textarea,dl,dt,dd { margin:0; padding:0; } table { border-collapse:collapse; width:100%; border:0; } cite { text-align:right; display:block; } object { display:block; margin:0 auto; height:auto; } del { color:#333; } hr { border:1px solid #ccc; margin:40px 0; } .wp-caption-text { text-align:center; } .alignright { float:right; } .alignleft { float:left; } .aligncenter { margin-left:auto; margin-right:auto; } .centered { margin-left:auto; margin-right:auto; } .clear { clear:both; } input[type="text"], input[type="password"], textarea, select { outline: none; } strong { font-size:18px; } .hide { display:none; } /* --- WordPress preset CSS ----------------------------------------------------------------------------------------- */ .post p { line-height:1.8; margin:0 0 15px 0 !important; } /* headline */ .post h1, .post h2, .post h3, .post h4, .post h5, .post h6 { clear:both; line-height:1.2; font-weight:600; margin:0 0 24px 0; } .post h1 { font-size:150%; } .post h2 { font-size:140%; } .post h3 { font-size:130%; } .post h4 { font-size:120%; } .post h5 { font-size:110%; } .post h6 { font-size:100%; } /* image */ .post img { height:auto; max-width:100%; } .post img.centered,div.centered { display:block; margin:15px auto; } .post img.aligncenter,div.aligncenter { display:block; margin:15px auto; } .post img.alignright,div.alignright { margin:10px 0 30px 30px; display:inline; } .post img.alignleft,div.alignleft { margin:10px 30px 30px 0; display:inline; } .post .wp-caption { background:#fff; border:1px solid #ccc; max-width:96%; padding:14px 3px 1px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .post .wp-caption img { display:block; margin:0 auto; max-width:100%; } .post .wp-caption .wp-caption-text { padding:10px 0 0; } /* table */ .post table { margin:0 0 24px 0; } .post td, .post th { border:1px solid #ccc; padding:10px 15px 7px; line-height:2; } .post th { background:#f4f8fa; font-weight:normal; } /* block quote */ .post blockquote { margin:0 0 24px 0; padding:27px 30px 1px; background:#f2f2f2; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; position:relative; } .post blockquote:before { content: '"'; font-style:italic; font-size:30px; font-weight:normal; line-height:40px; width:30px; height:30px; position:absolute; top:5px; left:10px; color:#999; } .post blockquote:after { content: '"'; font-style:italic; font-size:30px; font-weight:normal; text-align:left; line-height:60px; width:30px; height:30px; position:absolute; bottom:7px; right:-2px; color:#999; } /* list */ .post li, .post dt, .post dd { line-height:2; } .post ul, .post ol, .post dl { margin-bottom:24px; } .post ol { list-style:decimal outside none; margin-left:1.5em; } .post ul { list-style:disc outside none; margin-left:1.3em; } .post li > ul, .post li > ol { margin-bottom:0; } .post dt { font-weight:bold; } .post dd { margin-bottom:1em; } /* captions */ .post .wp-caption { margin-bottom:24px; background:#fff; border:1px solid #ccc; padding:5px; max-width:100%; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .post .wp-caption-text { text-align:center; font-size:12px; font-style:italic; line-height:2; margin:9px auto; } .post .wp-caption img[class*="wp-image-"] { display:block; margin:0 auto; } /* etc */ .post pre { margin:0 0 24px 0; line-height:1.5; background:#f2f2f2; padding:15px; overflow:auto; white-space:pre-wrap; word-wrap:break-word; } /* next page */ #post_pagination { margin:0 0 30px 0; clear:both; } #post_pagination h5 { margin:0 10px 0 0; float:left; line-height:30px; font-size:12px; } #post_pagination a, #post_pagination p { float:left; display:inline-block; background:#eee; margin:0 5px 0 0; width:30px; height:30px; line-height:30px; text-align:center; text-decoration:none; color:#333; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; font-size:12px; } #post_pagination p { background:#999; color:#fff; } #post_pagination a:hover { background:#333; color:#fff; } /* ---------------------------------------------------------------------- side content ---------------------------------------------------------------------- */ .side_widget { margin:0 0 40px 0; font-size:11px; overflow:hidden; } .side_widget ul { margin:0; } .side_widget li ul { margin:10px 0 0 0; } .side_widget li { line-height:170%; margin:0 0 10px 0; padding:0 0 0 9px; background:url(img/common/bullet1.gif) no-repeat left 8px; } .side_widget a { } .side_widget img { height:auto; max-width:100%; width:auto; } .side_headline { border-bottom:1px solid #ddd; padding:0; margin:0 0 25px 0; font-size:18px; } .side_headline span { border-bottom:4px solid #ccc; padding:0 0 10px 0; margin:0; display:inline-block; } /* banner */ #side_col .ad_widget, #side_col .ad_widget2 { background:none; border:none; padding:0; text-align:center; } /* calendar */ #wp-calendar { margin:0 auto; width:100%; font-size:11px; border-collapse:separate; table-layout:fixed; } #wp-calendar th, #wp-calendar td { color:#333; padding:0; line-height:340%; text-align:center; } #wp-calendar td a { display:block; margin:0; padding:0; text-decoration:none; color:#333; background-color:#eee; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; -webkit-transition-property:background; -webkit-transition-duration:0.4s; -webkit-transition-timing-function:ease; -moz-transition-property:background; -moz-transition-duration:0.4s; -moz-transition-timing-function:ease; -o-transition-property:background; -o-transition-duration:0.4s; -o-transition-timing-function:ease; } #wp-calendar td a:hover { text-decoration:none; color:#fff; background:#00a2d9; } #wp-calendar caption { padding:7px 0; } #wp-calendar thead th, #wp-calendar tfoot td { border:none; padding:0; line-height:200%; } #wp-calendar #prev, #wp-calendar #next { line-height:200%; } #wp-calendar #prev a, #wp-calendar #next a { text-decoration:none; background:none; color:#333; } #wp-calendar #prev a:hover, #wp-calendar #next a:hover { -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; color:#fff; background:#00a2d9; } #wp-calendar td#today { color:#fff; background:#c1c1c1; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } #footer #wp-calendar td a { background-color:#ddd; } #footer #wp-calendar td a:hover { background-color:#00a2d9; } /* search */ .widget_search label { display:none; } .widget_search #search-box, .widget_search #s, .google_search #search_input { width:238px; height:33px; margin:0 0 10px 0; border:1px solid #ccc; background:#fff; padding:0 10px; box-shadow:2px 2px 3px 0px #ddd inset; } .widget_search #search-btn input, .widget_search #searchsubmit, .google_search #search_button { border:none; text-indent:-9999px; width:33px; height:33px; background:#222 url(img/common/search.png) no-repeat center; cursor:pointer; display:block; float:right; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } .widget_search #search-btn input:hover, .widget_search #searchsubmit:hover, .google_search #search_button:hover { background-color:#00a2d9; } /* archive category dropdown */ .widget_archive select, .widget_categories select { border:1px solid #ddd; padding:6px 10px; width:100%; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; margin:0 0 20px 0; } /* recent post */ .tcd_recent_post_widget ol { margin:0; padding:0; list-style-type:none; } .tcd_recent_post_widget li { padding:0 0 14px 0; margin:0 0 14px 0; line-height:100%; border-bottom:1px dotted #aaa; background:none; } .tcd_recent_post_widget li:last-child { border:none; margin:0; padding:0; } .tcd_recent_post_widget a.image { display:block; float:left; width:65px; height:65px; margin:0 15px 0 0; background:#fff; border:1px solid #ccc; } .tcd_recent_post_widget a.image img { display:block; margin:0; -webkit-transition-property:opacity; -webkit-transition-duration:0.5s; -webkit-transition-timing-function:ease; -moz-transition-property:opacity; -moz-transition-duration:0.5s; -moz-transition-timing-function:ease; -o-transition-property:opacity; -o-transition-duration:0.5s; -o-transition-timing-function:ease; } .tcd_recent_post_widget a.image:hover img { opacity:0.5; } .tcd_recent_post_widget .date { margin:0 0 10px 0; padding:0; line-height:100%; font-size:11px; } .tcd_recent_post_widget a.title { margin:0; text-decoration:none; font-size:14px; line-height:160%; font-weight:bold; } .tcd_recent_post_widget a.title:hover { } /* product list */ .tcdw_product_list_widget ol { margin:0; padding:0; list-style-type:none; } .tcdw_product_list_widget li { padding:0 0 14px 0; margin:0 0 14px 0; line-height:100%; border-bottom:1px dotted #aaa; background:none; } .tcdw_product_list_widget li:last-child { border:none; margin:0; padding:0; } .tcdw_product_list_widget a.image { display:block; float:right; width:65px; height:65px; margin:0 0 0 15px; background:#fff; border:1px solid #ccc; } .tcdw_product_list_widget a.image img { display:block; margin:0; -webkit-transition-property:opacity; -webkit-transition-duration:0.5s; -webkit-transition-timing-function:ease; -moz-transition-property:opacity; -moz-transition-duration:0.5s; -moz-transition-timing-function:ease; -o-transition-property:opacity; -o-transition-duration:0.5s; -o-transition-timing-function:ease; } .tcdw_product_list_widget a.image:hover img { opacity:0.5; } .tcdw_product_list_widget a.title { margin:0; text-decoration:none; font-size:14px; line-height:160%; font-weight:bold; } .tcdw_product_list_widget a.title:hover { } .tcdw_product_list_widget .category { margin:0 0 5px 0; color:#aaa; } .tcdw_product_list_widget .category a { color:#aaa; text-decoration:none; } .tcdw_product_list_widget .category a:hover { text-decoration:underline; color:#333; } #footer .tcdw_product_list_widget li { padding:0 0 14px 0; margin:0 0 14px 0; line-height:100%; } /* product list2 */ .tcdw_product_list_widget2 ol { margin:0; padding:0; list-style-type:none; } .tcdw_product_list_widget2 li { padding:8px; margin:0 0 14px 0; line-height:100%; background:#fff; border:1px solid #ccc; } .tcdw_product_list_widget2 li:last-child { margin-bottom:0; } .tcdw_product_list_widget2 a.image { display:block; float:left; width:65px; height:65px; margin:0 15px 0 0; background:#fff; } .tcdw_product_list_widget2 a.image img { display:block; margin:0; -webkit-transition-property:opacity; -webkit-transition-duration:0.5s; -webkit-transition-timing-function:ease; -moz-transition-property:opacity; -moz-transition-duration:0.5s; -moz-transition-timing-function:ease; -o-transition-property:opacity; -o-transition-duration:0.5s; -o-transition-timing-function:ease; } .tcdw_product_list_widget2 a.image:hover img { opacity:0.5; } .tcdw_product_list_widget2 a.title { margin:0; text-decoration:none; font-size:14px; line-height:160%; font-weight:bold; } .tcdw_product_list_widget2 a.title:hover { } .tcdw_product_list_widget2 .category { margin:0 0 5px 0; color:#aaa; } .tcdw_product_list_widget2 .category a { color:#aaa; text-decoration:none; } .tcdw_product_list_widget2 .category a:hover { text-decoration:underline; color:#333; } #footer .tcdw_product_list_widget2 li { padding:8px; margin:0 0 15px 0; line-height:100%; border:none; } #footer .tcdw_product_list_widget2 li:last-child{ margin: 0; } /* recommend product list */ .tcdw_recommend_product_list_widget ol { margin:0 -10px 0 0; position:relative; padding:0; } .tcdw_recommend_product_list_widget li { margin:0 6px 15px 0; padding:0; background:none; float:left; list-style-type:none; } .tcdw_recommend_product_list_widget li a { display:block; text-decoration:none; position:relative; background:#fff; } .tcdw_recommend_product_list_widget li img { display:block; width:70px; height:70px; -webkit-transition-property:opacity; -webkit-transition-duration:0.5s; -webkit-transition-timing-function:ease; -moz-transition-property:opacity; -moz-transition-duration:0.5s; -moz-transition-timing-function:ease; -o-transition-property:opacity; -o-transition-duration:0.5s; -o-transition-timing-function:ease; } .tcdw_recommend_product_list_widget li a:hover img { opacity:0.5; } #footer .tcdw_recommend_product_list_widget li { margin:0 10px 15px 0; padding:0; } #footer .tcdw_recommend_product_list_widget li img { width:80px; height:80px; } /* news list */ .tcdw_news_list_widget ol { margin:0; padding:0; list-style-type:none; } .tcdw_news_list_widget li { background:none; margin:0 0 8px 0; padding:0 0 12px 0; border-bottom:1px dotted #aaa; } .tcdw_news_list_widget li:last-child { border:none; margin:0; padding:0; } .tcdw_news_list_widget .date { display:block; margin:0 0 5px 0; line-height:100%; } .tcdw_news_list_widget .title { margin:0 0 5px 0; padding:0; line-height:160%; font-size:13px; } .tcdw_news_list_widget .title a { text-decoration:none; display:block; } .tcdw_news_list_widget .title a:hover { } /* AdSense */ .ml_ad_widget { text-align:center; } /* ---------------------------------------------------------------------- archive ---------------------------------------------------------------------- */ /* page nav */ .page_navi { margin:0 0 40px 0; } .page_navi h4 { font-size:10px; font-weight:normal; margin:0 0 10px 0; color:#888; } .page_navi ul { margin:0; } .page_navi li { float:left; } .page_navi a, .page_navi a:hover, .page_navi span { text-decoration:none; color:#fff; font-size:11px; padding:13px 15px; line-height:100%; margin:0 4px 4px 0; background:#bbb; display:block; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; -webkit-transition-property:background; -webkit-transition-duration:0.4s; -webkit-transition-timing-function:ease; -moz-transition-property:background; -moz-transition-duration:0.4s; -moz-transition-timing-function:ease; -o-transition-property:background; -o-transition-duration:0.4s; -o-transition-timing-function:ease; } .page_navi a:hover { color:#fff; background:#00a2d9; text-decoration:none; } .page_navi span.dots { background:none; } .page_navi span.current { color:#fff; background:#333; } .page_navi p.back { margin:0; } .page_navi p.back a, .page_navi p.back a:hover { display:inline-block; padding: 10px 15px; } /* ---------- clearfix hack ---------- */ .clearfix:after { content: "."; display:block; clear:both; height:0; font-size:0.1em; line-height:0; visibility:hidden; overflow:hidden; } .clearfix { display:inline-block; } /* exlude MacIE5 \*/ * html .clearfix { height:1% } .clearfix { display:block;} /* end MacIE5 */ /* パンくずリンク */ #bread_crumb {padding:20px 0 0px;margin:0px auto 0;width:100%;} #bread_crumb li.home a { float:left; height:15px; width:0px; line-height:15px; display:block; position:relative; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } #bread_crumb li.home a span { text-indent:100%; white-space:nowrap; overflow:hidden; display:block; } #bread_crumb li.home a:before { font-family:'design_plus'; color:#888; font-size:14px; display:block; position:absolute; top:0px; left:0px; width:17px; height:17px; line-height:17px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #bread_crumb li.home:after { display:none; } #bread_crumb li.home a:before { content:'\e90c'; } #bread_crumb li.home a:hover:before { color:#fff; } #bread_crumb li { color:#aaa; font-size:12px; display:inline; padding:0 15px 0 0; margin:0 0 0 15px; line-height:160%; position:relative; } #bread_crumb li:after { font-family:'design_plus'; content:'\e910'; color:#aaa; font-size:9px; display:block; position:absolute; left:-20px; top:-1px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #bread_crumb li a { color:#888; } /* ---------------------------------------------------------------------- ソーシャルボタン ---------------------------------------------------------------------- */ @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?evfvw0'); src: url('fonts/icomoon.eot?evfvw0#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?evfvw0') format('truetype'), url('fonts/icomoon.woff?evfvw0') format('woff'), url('fonts/icomoon.svg?evfvw0#icomoon') 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: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* 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_top1 ul li a, #share_top2 ul li a, #share_btm1 ul li a, #share_btm2 ul li a { -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; transition:all 0.3s; } /*-------------------------------- share_top1（Style1） ---------------------------------*/ #share_top1 { width:100%; margin:0 0 15px; } #share_top1 h2 { color:#666666; font-weight:400; } #share_top1 ul { margin:0; padding:0; list-style:none; } #share_top1 ul li { display:inline-block; padding:0; text-align:center; } #share_top1 ul li 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,.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_top1 ul li a i { position:relative; top:3px; color:#fff; font-size:1.3em; text-shadow:1px 1px 0 rgba(255, 255, 255, .1); } #share_top1 ul li a .ttl { margin:0 3px 0 2px; text-align:center; line-height:20px; } #share_top1 ul li a .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; } #share_top1 ul li > a:hover { -webkit-transform:translate3d(0, 1px, 0); transform:translate3d(0, 1px, 0) } @media screen and (max-width:480px) { #share_top1 { width:100%; margin:20px 0 5px; } #share_top1 ul {} #share_top1 ul li a { margin-right:2px; } #share_top1 ul li a i { left:1px; } #share_top1 ul li>a span { display:none; } #share_top1 ul li a .share-count { margin-left:3px; } } /*-------------------------------- share_btm1（Style3） ---------------------------------*/ #share_btm1 { margin:15px 0 15px; } #share_btm1 .sns { text-align:center; } #share_btm1 ul { margin:0 0 2%; list-style:none; } #share_btm1 li { float:left; width:48%; margin:0 1% 1.5%; 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_btm1 ul li { list-style:none; background-image:none; padding:0; } #share_btm1 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_btm1 ul li a i { position:relative; top:3px; font-size:140%; } #share_btm1 ul li a .ttl { margin:0 3px 0 4px; display:inline-block; text-align:center; font-size:12px; } #share_btm1 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_btm1 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_btm1 { width:100%; margin:-15px 0 15px; } #share_btm1 ul { margin-right:-1%; list-style:none; overflow:hidden; } #share_btm1 li { width:24%; margin:0 1% 1% 0; } #share_btm1 li a { font-size:12px; padding:10px 2px; } #share_btm1 li:nth-child(4n) { margin-right:0; } } /*------------- share_top1 & share_btm1 button_color -------------*/ /* Twitter */ #share_top1 ul li.twitter a, #share_btm1 ul li.twitter a { color:#fff; background-color:#55acee; } #share_top1 ul li.twitter a:hover, #share_btm1 ul li.twitter a:hover { background-color:#468ec5; } /* Facebook */ #share_top1 ul li.facebook a, #share_btm1 ul li.facebook a { background-color:#35629a; } #share_top1 ul li.facebook a:hover, #share_btm1 ul li.facebook a:hover { background-color:#1f3669; } /* Google+ */ #share_top1 ul li.googleplus a, #share_btm1 ul li.googleplus a { background-color:#dd4b39;} #share_top1 ul li.googleplus a:hover, #share_btm1 ul li.googleplus a:hover { background-color:#b94031;} #share_top1 ul li.googleplus a i { top:4px; } /* Hatena */ #share_top1 ul li.hatebu>a, #share_btm1 ul li.hatebu a { background-color:#3c7dd1;} #share_top1 ul li.hatebu>a:hover, #share_btm1 ul li.hatebu a:hover { background-color:#0270ac;} /* Pocket */ #share_top1 ul li.pocket a, #share_btm1 ul li.pocket a { background-color:#ee4056; } #share_top1 ul li.pocket a:hover, #share_btm1 ul li.pocket a:hover { background-color:#c53648; } /* rss */ #share_top1 ul li.rss a, #share_btm1 ul li.rss a { background-color:#ffb53c; } #share_top1 ul li.rss a:hover, #share_btm1 ul li.rss a:hover { background-color:#e09900; } /* Feedly */ #share_top1 ul li.feedly a, #share_btm1 ul li.feedly a { background-color:#6cc655; } #share_top1 ul li.feedly>a:hover, #share_btm1 ul li.feedly>a:hover { background-color:#5ca449; } /* Pinterest */ #share_top1 ul li.pinterest a, #share_btm1 ul li.pinterest a { background-color:#d4121c; } #share_top1 ul li.pinterest a:hover, #share_btm1 ul li.pinterest a:hover { background-color:#a42f35; } /*-------------------------------- share_top2（Style2） ---------------------------------*/ #share_top2 { width:100%; margin:0 0 15px; } #share_top2 h2 { color:#444; font-weight:400; } #share_top2 ul.type2 { margin:0; padding:0; list-style:none; } #share_top2 ul.type2 li { display:inline-block; padding:0; text-align:center; } #share_top2 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,.1); box-shadow:0 1px 0 rgba(0,0,0,.03); text-shadow:none; line-height:25px; padding:1px 5px 0; } #share_top2 ul.type2 li a i { position:relative; top:3px; color:#222; font-size:1.3em; text-shadow:1px 1px 0 rgba(255, 255, 255, .1); } #share_top2 ul.type2 li a .ttl { margin:0 3px 0 2px; text-align:center; line-height:20px; } #share_top2 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_top2 ul.type2 li a:hover, #share_top2 ul.type2 li a:hover i, #share_top2 ul.type2 li a:hover .share-count { color:#fff !important; } #share_top2 ul.type2 li a:hover { border-color:rgba(255,255,255,.1); } @media screen and (max-width:480px) { #share_top2 { width:100%; margin:20px 0 5px; } #share_top2 ul.type2 {} #share_top2 ul.type2 li a { margin-right:2px; } #share_top2 ul.type2 li a i { left:1px; } #share_top2 ul.type2 li>a span.ttl { display:none; } #share_top2 ul.type2 li a .share-count { margin-left:3px; } } /*-------------------------------- share_btm2（Style4） ---------------------------------*/ #share_btm2 { margin:15px 0 15px; text-align:center; } #share_btm2 .sns {} #share_btm2 ul.type4 { margin:0 0 2%; list-style:none; } #share_btm2 ul.type4 li { float:left; width:48%; margin:0 1% 1.5%; 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_btm2 ul li { list-style:none; background-image:none; padding:0; } #share_btm2 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,.1); box-shadow:0 1px 0 rgba(0,0,0,.03); text-shadow:none; } #share_btm2 ul.type4 li a i { position:relative; top:3px; font-size:140%; color:#222 !important; } #share_btm2 ul.type4 li a .ttl { margin:0 3px 0 4px; display:inline-block; text-align:center; font-size:12px; } #share_btm2 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_btm2 ul.type4 li a:hover, #share_btm2 ul.type4 li a:hover i, #share_btm2 ul.type4 li a:hover .share-count { color:#fff !important; } @media only screen and (min-width:480px) { #share_btm2 { width:100%; margin:-15px 0 15px; } #share_btm2 ul.type4 { margin-right:-1%; list-style:none; overflow:hidden; } #share_btm2 ul.type4 li { width:24%; margin:0 1% 1% 0; } #share_btm2 ul.type4 li a { font-size:12px; padding:10px 2px; } #share_btm2 ul.type4 li:nth-child(4n) { margin-right:0; } } /*------------- share_top2 & share_btm4 button_color -------------*/ /* Twitter */ #share_top2 ul.type2 li.twitter a, #share_btm2 ul.type4 li.twitter a { color:#222 !important; background-color:#fafafa !important; } #share_top2 ul.type2 li.twitter a:hover, #share_btm2 ul.type4 li.twitter a:hover { color:#fff !important; background-color:#55acee !important; } /* Facebook */ #share_top2 ul.type2 li.facebook a, #share_btm2 ul.type4 li.facebook a { color:#222 !important; background-color:#fafafa !important; } #share_top2 ul.type2 li.facebook a:hover, #share_btm2 ul.type4 li.facebook a:hover { color:#fff !important; background-color:#35629a !important; } /* Google+ */ #share_top2 ul.type2 li.googleplus a, #share_btm2 ul.type4 li.googleplus a { color:#222 !important; background-color:#fafafa !important; } #share_top2 ul.type2 li.googleplus a:hover, #share_btm2 ul.type4 li.googleplus a:hover { color:#fff !important; background-color:#dd4b39 !important;} #share_top2 ul.type2 li.googleplus a i, #share_btm2 ul.type4 li.googleplus a i { top:4px; } /* Hatena */ #share_top2 ul.type2 li.hatebu a, #share_btm2 ul.type4 li.hatebu a { color:#222 !important; background-color:#fafafa !important; } #share_top2 ul.type2 li.hatebu a:hover, #share_btm2 ul.type4 li.hatebu a:hover { color:#fff !important; background-color:#3c7dd1 !important;} /* Pocket */ #share_top2 ul.type2 li.pocket a, #share_btm2 ul.type4 li.pocket a { color:#222 !important; background-color:#fafafa !important; } #share_top2 ul.type2 li.pocket a:hover, #share_btm2 ul.type4 li.pocket a:hover { color:#fff !important; background-color:#ee4056 !important; } /* rss */ #share_top2 ul.type2 li.rss a, #share_btm2 ul.type4 li.rss a { color:#222 !important; background-color:#fafafa !important; } #share_top2 ul.type2 li.rss a:hover, #share_btm2 ul.type4 li.rss a:hover { color:#fff !important; background-color:#ff8c00 !important; } /* Feedly */ #share_top2 ul.type2 li.feedly a, #share_btm2 ul.type4 li.feedly a { color:#222 !important; background-color:#fafafa !important; } #share_top2 ul.type2 li.feedly a:hover, #share_btm2 ul.type4 li.feedly a:hover { color:#fff !important; background-color:#6cc655 !important; } /* Pinterest */ #share_top2 ul.type2 li.pinterest a, #share_btm2 ul.type4 li.pinterest a { color:#222 !important; background-color:#fafafa !important; } #share_top2 ul.type2 li.pinterest a:hover, #share_btm2 ul.type4 li.pinterest a:hover { color:#fff !important; background-color:#d4121c !important; } /*-------------------------------- share_top5（公式ボタン） ---------------------------------*/ #share5_top { margin:5px 0 -10px;; } #share5_btm { margin:20px 0 -30px; } .sns_default_top { margin:0; 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:62px; } .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) { #share5_top { margin:0 0 -30px; } #share5_btm { margin:30px 0 -30px; } .sns_default_top { margin:0; } .sns_default_top ul li { margin-bottom:6px; } .sns_default_top ul li.twitter_button { margin-left:0; } } /* ----------------------- TCD Advanced Style ------------------------ */ /* ---------------------------------------------------------------------- Column layout - カラムレイアウト ---------------------------------------------------------------------- */ .post .post_row { margin-left:-15px; margin-right:-15px; line-height:2; } .post .post_col, .post .post_col-2, .post .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 .post_col-2 { width:50%; /* 2カラム */ } .post .post_col-3 { width:33.33333%; } } @media screen and (min-width:1024px){ .post .post_col-2 { width:50%; /* 2カラム */ } .post .post_col-3 { width:33.33333%; } } .post .post_row:before, .post .post_row:after { content: " "; display: table; } .post .post_row:after { clear: both; } /* ---------------------------------------------------------------------- headline - 見出しのスタイル ---------------------------------------------------------------------- */ .post h3, .post h4, .post h5, .post h6 { line-height:1.6; } /* h3 */ .post .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 .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 .style4a { margin:2.5em 2px 1.2em; padding:.3em 0 .3em .8em; font-size:20px; font-weight:400; border-bottom:none; border-left:2px solid #222; } .post .style4b { margin:2.5em 0 1.2em; padding:.9em 0 .8em; font-size:20px; font-weight:400; border-bottom:1px dotted #aaa; } /* h5 */ .post .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 .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 .style6 { position:relative; margin:2em 0 1em; padding:.5em .8em .8em 1.3em; color:#222; font-weight:bold; font-size:16px; } .post .style6:before { position:absolute; width:12px; height:12px; top:.5em; left:.2em; background:#222; content:""; } .post .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 .news_headline1:after { content:""; position:absolute; bottom:0px; left:0; height:0; width:100%; border-bottom:1px dotted #ddd; } .post .news_headline2{ margin:40px 0 20px 0; padding:0 .5em; border-left:6px solid #545454; line-height:26px; font-size:1.1em;} .post .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 .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 - 囲み枠 ---------------------------------------------------------------------- */ .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ボタンのスタイル ---------------------------------------------------------------------- */ .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; 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; 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; } /* ---------------------------------------------------------------------- Youtube responsive - Youtube動画のレスポンシブ表示 ---------------------------------------------------------------------- */ .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 - テーブルのレスポンシブ表示 ---------------------------------------------------------------------- */ .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 - カードリンクのスタイル ---------------------------------------------------------------------- */ .cardlink { padding:12px 12px 8px; margin:10px 0; border:1px solid #ddd; word-wrap:break-word; max-width:100%; background:#fafafa; } .cardlink_thumbnail { float:left; margin:0 20px 0 0; } .cardlink_content { margin-top:5px; line-height:1.6; } .cardlink .timestamp { margin:0; padding:0; font-size:12px; font-weight:400; line-height:100%; color:#333; } .cardlink_title { font-size:14px; margin:4px 0 4px; } .cardlink_title a { font-weight:bold; color:#000; text-decoration:none; } .cardlink_title a:hover { text-decoration:underline; } .cardlink_excerpt { color:#333; font-size:12px; 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 - お問い合わせフォーム ---------------------------------------------------------------------- */ .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 { 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 { 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; } /* ---------------------------------------------------------------------- font-size - フォントサイズ ---------------------------------------------------------------------- */ .text70{font-size:70%} /* フォントサイズ70% */ .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-through} /* 打ち消し線 */ /* ---------------------------------------------------------------------- font-color - フォントカラー ---------------------------------------------------------------------- */ .red{color:red} /* 赤色 */ .blue{color:#2ca9e1} /* 青色 */ .green{color:#82ae46} /* 緑色 */ .orange{color:#ff7d00} /* 橙色 */ .yellow{color:#fff000} /* 黄色 */ .pink{color:#ff0084} /* ピンク */ .gray{color:#999999} /* グレー */ /* ---------------------------------------------------------------------- background-color - 背景色 ---------------------------------------------------------------------- */ .bg-yellow{padding:2px;background-color:#ff0} /* 黄色の文字背景 */ .bg-blue{padding:2px;background-color:#4ab0f5} /* 青色の文字背景 */ .bg-red{padding:2px;background-color:red} /* 赤色の文字背景 */ /* ---------------------------------------------------------------------- text-align - 配置 ---------------------------------------------------------------------- */ .align1{text-align:center !important} /* 中央寄せ */ .align2{text-align:right !important} /* 右寄せ */ .align3{text-align:left !important} /* 左寄せ */ /* ---------------------------------------------------------------------- float - 回り込み ---------------------------------------------------------------------- */ .r-flo{float:right;margin:10px} /* 右に回り込み */ .l-flo{float:left;margin:10px} /* 左に回り込み */ .f-clear{clear:both} /* 回り込みの解除 */ /* ---------------------------------------------------------------------- hover - 画像リンクマウスオーバー時の不透明度 ---------------------------------------------------------------------- */ 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 - テキストスタイル ---------------------------------------------------------------------- */ .att {padding-left:1em;text-indent:-1em;} /* 注意書き等で二行目以降を字下げ */ .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; } /* テキストボックス */ /* ---------------------------------------------------------------------- margin - 要素の外側の余白 ---------------------------------------------------------------------- */ .m0{margin:0 !important} /* margin 0px を指定するクラス */ .mt0{margin-top:0 !important} /* margin-top0px を指定するクラス */ .mr0{margin-right:0 !important} /* margin-right0px を指定するクラス*/ .mb0{margin-bottom:0 !important} /* margin-bottom0px を指定するクラス*/ .ml0{margin-left:0 !important} /* margin-left0px を指定するクラス*/ .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 - 要素の内側の余白 ---------------------------------------------------------------------- */ .p0{padding:0 !important} /* padding-0px を指定するクラス */ .pt0{padding-top:0 !important} /* padding-top0px を指定するクラス */ .pr0{padding-right:0 !important} /* padding-right0px を指定するクラス */ .pb0{padding-bottom:0 !important} /* padding-bottom0px を指定するクラス */ .pl0{padding-left:0 !important} /* padding-left0px を指定するクラス */ .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} /* ---------------------------------------------------------------------- 追加css 大内 ---------------------------------------------------------------------- */ .stitch { display:inline-block; font-size:16px: 　 color: #fff; margin: 1.5em auto; padding: 8px 10px 8px; margin-bottom: 1.0em; background: #86bd9b; color: #fff; border: 1px dashed #fff; border-radius: 3px; box-shadow: 0 0 0 4px #86bd9b; } .midashi { position: relative; border-bottom: 2px solid #ccc; padding: 0.5em; font-size:14px; } .midashi::after { position: absolute; bottom: -2px; left: 0; content: ''; width: 20%; border-bottom: 2px solid #000000; } .menuLineDouble { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color: #d2d2d2; border-style:solid; background:#333; color:#fff; line-height:140%; font-weight:bold; text-align:center; } #main .section .demo dl dt { font-size: 14px; } .midashi { font-size: 16px !important; } .post.clearfix table tbody tr td strong a { text-decoration: none; } .rad { border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; } .box { width:400px; height:30px; background-color:#00a0e9; color:white; text-align:center; padding-top:10px; } .post_content h4 { font-size: 16px; text-align: center; } .post_content h4 a{ font-size: 16px; text-align: center; } .komidashi2 { font-size: 16px; padding: 10px; background-color: #000; display: inline-block; margin-bottom:-5px; color:#FFFFFF; font-weight:normal !important; padding-left:20px; padding-right:20px; } .futomoji2 { margin-bottom:-5px; font-size:16px; } .box30 { margin: 2em 0; background: #f1f1f1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); } .box30 .box-title { font-size: 1.2em; background: #000; padding: 4px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.05em; } .box30 p { padding: 15px 20px; margin: 0; } .box11{ padding: 0.5em 1em; margin: 2em 0; color: #5d627b; background: white; border-top: solid 5px #000000; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); width:90%; margin: auto; padding-top:20px; padding-bottom:20px; } .box11 p { margin: 0; padding: 0; } .box28 { position: relative; margin: 2em 0; padding: 25px 10px 7px; border: solid 2px #000000; width:90%; margin:auto; } .box28 .box-title { position: absolute; display: inline-block; top: -2px; left: -2px; padding: 0 9px; height: 25px; line-height: 25px; vertical-align: middle; font-size: 16px; background: #000000; color: #ffffff; font-weight: bold; padding:10px; } .box28 p { margin: 0; padding: 0; } .medatu { padding: 0.5em 0.5em;/*文字の上下 左右の余白*/ color: #494949;/*文字色*/ background: #f4f4f4;/*背景色*/ border-left: solid 5px #959595;/*左線*/ border-bottom: solid 3px #d7d7d7;/*下線*/ font-size:14px; } .box27 { position: relative; margin: 2em 0; padding: 0.5em 1em; border: solid 3px #000000; } .box27 .box-title { position: absolute; display: inline-block; top: -27px; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; vertical-align: middle; font-size: 15px; background: #000000; color: #ffffff; font-weight: bold; border-radius: 3px 3px 0 0; } .box27 p { margin: 0; padding: 0; } .container.clearfix .msg .mb20 { font-size: 16px; line-height:1.8; } .container.clearfix .msg .h1title { font-size:18px; font-weight:bold; background-color:#e3e5e6; color:#504f4f; display:inline-block; padding:10px; text-align:center; } .blue { font-size: 18px !important; color: #f36b64; text-align: center; margin-bottom:-20px; } .box63 { padding: 0.5em 1em; margin: 2em 0; background: #e5f1f6; border: dotted 1px #67a9df;/*点線*/ } .box63 p { margin: 0; padding: 0; font-size:14px; line-height:1.7; } .box260 { position: relative; margin: 2em 0; padding: 0.5em 1em; border: solid 2px #2eaae0; border-radius: 8px; } .box260 .box-title { position: absolute; display: inline-block; top: -13px; left: 10px; padding: 0 9px; line-height: 1; font-size: 17px; background: #FFF; color: #2eaae0; font-weight: bold; } .box260 p { margin: 0; padding: 10px; } .box291 { margin: 2em 0; background: #fcf4f4; } .box291 .box-title { font-size: 1.2em; background: #cc0033; padding: 4px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.05em; } .box291 p { padding: 15px 20px; margin: 0; } #toc_container { margin: auto; margin-bottom:20px; } .parts-wrapper { -webkit-box-sizing: border-box; box-sizing: border-box; width: 80%; margin: auto; } .coupon-box { border: 1px solid #9F928A; -webkit-box-sizing: border-box; box-sizing: border-box; } .coupon-box__wrapper { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 767px) { .coupon-box__wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .coupon-box__label { background-color: #D97692; color: #fff; letter-spacing: 0.5em; line-height: 2; text-align: center; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } @media screen and (max-width: 767px) { .coupon-box__label { -webkit-writing-mode: initial; -ms-writing-mode: initial; writing-mode: initial; } } .coupon-box__imformation { padding: 1em; } .coupon-box__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 399px) { .coupon-box__content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .coupon-box__title { font-size: 20px; } .coupon-box__image { position: relative; background-color: #9F928A; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 10vw; width: 10vw; color: #fff; } @media screen and (max-width: 399px) { .coupon-box__image { width: 48px; height: 48px; } } .coupon-box__image::before { -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 1px solid #fff; content: ""; height: 80%; width: 80%; } @media screen and (max-width: 767px) { .coupon-box__image-text { font-size: 12px; } } @media screen and (max-width: 499px) { .coupon-box__image-text { font-size: 10px; } } .coupon-box__description { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-left: 2em; } @media screen and (max-width: 767px) { .coupon-box__description { margin-left: 1em; } } .coupon-box__condition-title { display: inline-block; color: #D97692; font-weight: 500; } .coupon-box__condition-data { display: inline-block; margin-left: 0; font-weight: 500; } .coupon-box__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 500px) { .coupon-box__top { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .category-list { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; padding-left: 0; font-size: 12px; } @media screen and (max-width: 399px) { .category-list { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: -0.5em; } } .category-list__item { background-color: #FF8B8F; color: #fff; padding-right: 1em; padding-left: 1em; margin-left: 0.5em; } @media screen and (max-width: 399px) { .category-list__item { margin-top: 0.5em; } } .coupon-box__price { color: #D97692; } .coupon-box__reserve { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; background-color: #FEF7EF; width: 45%; padding: 1em; } @media screen and (max-width: 767px) { .coupon-box__reserve { width: 100%; } } .btn-group { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; margin: auto; } @media screen and (max-width: 767px) { .btn-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: initial; } } @media screen and (max-width: 500px) { .btn-group { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .coupon-box__btn:not(:first-child) { margin-top: 0.5em; } @media screen and (max-width: 767px) { .coupon-box__btn:not(:first-child) { margin-top: 0; margin-left: 1em; } } @media screen and (max-width: 500px) { .coupon-box__btn:not(:first-child) { margin-top: 0.5em; margin-left: 0; } } .pink-btn { -webkit-box-sizing: border-box; box-sizing: border-box; display: block; padding: 0.5em; margin: auto; background: -webkit-gradient(linear, left top, left bottom, from(#FF8B8F), to(#F7586A)); background: linear-gradient(to bottom, #FF8B8F, #F7586A); border: 1px solid #D97692; border-radius: 4px; color: #FEF7EF; text-align: center; } @media screen and (max-width: 767px) { .pink-btn { width: auto; } } .pink-btn--pale { background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#FEF7EF)); background: linear-gradient(to bottom, #fff, #FEF7EF); color: #D97692; font-weight: 700; font-size: 12px; } @media screen and (max-width: 767px) { .pink-btn--pale { margin: 0; } } .h22midashi { position: relative; padding: 1.5rem; text-align: center; font-size:17px; } .h22midashi:before { position: absolute; bottom: 10px; left: calc(50% - 30px); width: 60px; height: 4px; content: ''; border-radius: 3px; background: #cd4d72; } .pink { font-size: 17px !important; color: #cd4d72; } .nishoku { } .nishoku { position: relative; padding-bottom: .5em; border-bottom: 3px solid #f9cacc; font-size: 15px; padding-left:10px; } .nishoku::after { position: absolute; bottom: -3px; left: 0; z-index: 2; content: ''; width: 15%; height: 3px; background-color: #cd4d72; } .parts-wrapper { -webkit-box-sizing: border-box; box-sizing: border-box; width: 80%; margin: auto; } .coupon-box { border: 1px solid #9F928A; -webkit-box-sizing: border-box; box-sizing: border-box; } .coupon-box__wrapper { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 767px) { .coupon-box__wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .coupon-box__label { background-color: #D97692; color: #fff; letter-spacing: 0.5em; line-height: 2; text-align: center; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } @media screen and (max-width: 767px) { .coupon-box__label { -webkit-writing-mode: initial; -ms-writing-mode: initial; writing-mode: initial; } } .coupon-box__imformation { padding: 1em; } .coupon-box__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 399px) { .coupon-box__content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .coupon-box__title { font-size: 16px; font-weight:bold; margin-bottom:-15px; } .coupon-box__image { position: relative; background-color: #9F928A; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 10vw; width: 10vw; color: #fff; } @media screen and (max-width: 399px) { .coupon-box__image { width: 48px; height: 48px; } } .coupon-box__image::before { -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 1px solid #fff; content: ""; height: 80%; width: 80%; } @media screen and (max-width: 767px) { .coupon-box__image-text { font-size: 12px; } } @media screen and (max-width: 499px) { .coupon-box__image-text { font-size: 10px; } } .coupon-box__description { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-left: 2em; } @media screen and (max-width: 767px) { .coupon-box__description { margin-left: 1em; } } .coupon-box__condition-title { display: inline-block; color: #D97692; font-weight: 500; } .coupon-box__condition-data { display: inline-block; margin-left: 0; font-weight: 500; } .coupon-box__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 500px) { .coupon-box__top { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .category-list { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; padding-left: 0; font-size: 12px; margin-bottom:-10px; } @media screen and (max-width: 399px) { .category-list { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: -0.5em; } } .category-list__item { background-color: #FF8B8F; color: #fff; padding-right: 1em; padding-left: 1em; margin-left: 0.5em; } @media screen and (max-width: 399px) { .category-list__item { margin-top: 0.5em; } } .coupon-box__price { color: #D97692; } .coupon-box__reserve { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; background-color: #FEF7EF; width: 45%; padding: 1em; } @media screen and (max-width: 767px) { .coupon-box__reserve { width: 100%; } } .btn-group { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; margin: auto; } @media screen and (max-width: 767px) { .btn-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: initial; } } @media screen and (max-width: 500px) { .btn-group { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .coupon-box__btn:not(:first-child) { margin-top: 0.5em; } @media screen and (max-width: 767px) { .coupon-box__btn:not(:first-child) { margin-top: 0; margin-left: 1em; } } @media screen and (max-width: 500px) { .coupon-box__btn:not(:first-child) { margin-top: 0.5em; margin-left: 0; } } .pink-btn { -webkit-box-sizing: border-box; box-sizing: border-box; display: block; padding: 0.5em; margin: auto; background: -webkit-gradient(linear, left top, left bottom, from(#FF8B8F), to(#F7586A)); background: linear-gradient(to bottom, #FF8B8F, #F7586A); border: 1px solid #D97692; border-radius: 4px; color: #FEF7EF; text-align: center; } @media screen and (max-width: 767px) { .pink-btn { width: auto; } } .pink-btn--pale { background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#FEF7EF)); background: linear-gradient(to bottom, #fff, #FEF7EF); color: #D97692; font-weight: 700; font-size: 12px; } @media screen and (max-width: 767px) { .pink-btn--pale { margin: 0; } } /*# sourceMappingURL=style.css.map */ .coupon-box__description p { font-size: 14px; } /*-------------------------- 全体の設定 --------------------------*/ .container-ayk { width: 800px; height: 229px; margin: 0 auto; display: flex; justify-content: space-between; } /*-------------------------- left-contentの設定 --------------------------*/ .container-ayk .left-content { display: inline-flex; width: 25px; line-height: 0; background-color: #D97791; color: #FFFFFF; } .container-ayk .left-content p { font-size: 12px; font-weight: bold; text-align: center;    -ms-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; writing-mode: vertical-rl; letter-spacing: 8px; } /*-------------------------- centerとrightをひとつにまとめる centerとrightを横並びにする --------------------------*/ .container-ayk .parent-frame { display: flex; } /*-------------------------- center-contentの設定 --------------------------*/ .container-ayk .center-content { display: block; padding: 10px 15px 10px 10px; width: 570px; background-color: #FFFFFF; } /* イメージ画像 */ .container-ayk .center-content img { width: 66px; height: 110px; object-fit: cover; padding: 0 0 24px 15px; } /* box1 */ .container-ayk .box1 { display: flex; justify-content: flex-start; margin: 0; padding: 0; } .container-ayk ul { list-style: none; } .container-ayk .icon { font-size: 8px; background-color: #FF8A8F; margin-right: 7px; margin-bottom: 10px; padding: 1px 10px; color: #FFF; } .container-ayk .coupon-price { margin-left: auto; color: #DF869A; } /* クーポンの名前 */ .container-ayk .coupon-name { margin: 0; padding: 0 0 8px 0; color: #665555; font-size: 14px; } /* box2 */ .container-ayk .box2 { display: flex; width: 100%; color: #666666; font-size: 11px; } .container-ayk .coupon-detail { padding-left: 25px; } .container-ayk .coupon-detail p { margin: 0; line-height: 1.5; } .container-ayk .coupon-detail ul { margin: 10px 0 0 0; padding: 0; line-height: 2.2; } /* ”このクーポンの詳細”は スマホ画面のみ表示する */ .container-ayk .hide { display: none; color: #4d2ef7; border-bottom: solid 1px #4d2ef7; line-height: 1; } .container-ayk .redcolor { color: #CE4B6B; } /*-------------------------- right-contentの設定 --------------------------*/ .container-ayk .right-content { display: inline-flex; flex-direction: column; justify-content: center; width: 180px; text-align: center; background-color: #FDF7EF; color: #FFFFFF; } .container-ayk .right-content a { text-decoration: none; } /* 濃いピンクのボタン */ .container-ayk .right-content .btn { display: inline-block; padding: 6px 9px; margin: 0 11px; font-size: 13px; line-height: 1.4; font-weight: 700; color: #FFFFFF; background: linear-gradient(to bottom, #FF9BA2 0%,#F95A6B 75%,#F85164 100%); border: 1px solid #DA949B; border-radius: 4px; box-shadow: inset 1px 1px 3px #f9d8db, inset -1px -1px 3px #ffa6ae; } /* 薄いピンクのボタン */ .container-ayk .right-content .btn-add { display: inline-block; margin-top: 15px; padding: 3px 5px; margin: 9px 11px; font-size: 12px; line-height: 1.5; font-weight: 600; color: #E53B4E; background: linear-gradient(to bottom, #FFFFFF 0%,#FAE5E7 100%); border: solid 1px #E5848E; border-radius: 3px; } .container-ayk .right-content a:hover { opacity: 0.7; } .mii_container { max-width: 765px; margin: 0 auto; font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS P Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', arial, sans-serif, verdana, Helvetica; font-size: 12px; line-height: 1.5; color: #333; } .mii_hair-contents { margin-top: 20px; } .mii_hair-contents__header { border-bottom: 3px solid #E4E0D9; padding: 0 0 15px 10px; } .mii_hair-contents__header h2 { color: #665555; font-size: 16px; margin: 0; border: none; padding: 0; } .mii_hair-contents__detail { padding: 0 10px; margin-top: 20px; display: flex; } .mii_hair-contents__detail .mii_hair-image img { max-width: 271px; height: auto; } .mii_hair-contents__detail .mii_hair-information { max-width: 450px; flex-grow: 1; margin-left: auto; } .mii_hair-information__item { margin-top: 20px; } .mii_hair-information__item .mii_item-title { font-weight: bold; color: #CC4466; background-color: #F5F3F1; padding: 6px 10px; } .mii_hair-information__item .mii_item-box { padding-top: 10px; } .mii_hair-information__item.style { margin-top: 0; } .mii_hair-information__item.style .mii_item-box { padding: 10px 0 0 10px; } .mii_hair-information__item.mii_comment .mii_item-box { display: flex; } .mii_hair-information__item.data .mii_item-box { padding: 0; } .mii_hair-information__item.type .mii_item-box { display: flex; padding: 10px 10px 0; } .mii_item-box .mii_item-box__title { color: #665555; font-weight: bold; margin-bottom: 10px; } .mii_item-box p { margin: 0; } .mii_item-box .mii_item-box__img { margin-right: 15px; } .mii_item-box .mii_item-box__img img { max-width: 89px; height: auto; } .mii_item-box .mii_item-box__text { flex-grow: 1; } .mii_item-box .mii_item-box__text .stylist-name { font-size: 14px; margin: 5px 0 10px; color: #4C4C80; font-weight: bold; } .mii_item-box ul { margin: 0; padding: 0; list-style: none; display: flex; border-bottom: 1px dotted #999999; padding: 5px 0 5px 10px; } .mii_item-box ul li:first-of-type { font-weight: bold; color: #665555; min-width: 90px; } .mii_item-box ul li:last-of-type { flex-grow: 1; } .mii_item-box .type-hair, .mii_item-box .type-face { width: 190px; color: #665555; } .type-hair .type-hair__box { display: flex; margin-top: 5px; } .type-hair .type-hair__box:first-of-type { margin-top: 0; } .type-hair__box .type-hair__box-label { min-width: 30px; } .type-hair__box .type-hair__box-item { background-color: #EEEEEE; color: #999999; display: block; font-size: 11px; height: 21px; line-height: 21px; text-align: center; width: 48px; margin-left: 5px; } .type-hair__box .type-hair__box-item.on { background-color: #CD4466; color: #FFFFFF; } .mii_item-box .type-face { margin-left: auto; } .type-face .type-face__model { display: flex; } .type-face__model .type-face__box-label { min-width: 30px; } .type-face__model .type-face__box-item { display: flex; flex-wrap: wrap; } .type-face__model .type-face__box-item span { border: solid 1px #DEDEDE; min-width: 46px; height: 46px; text-align: center; display: inline-block; font-size: 11px; margin-left: 5px; } .type-face__model .type-face__box-item span:nth-last-of-type(-n+2) { margin-top: 5px; } .type-face__box-item span.on { background-color: #CD4465; color: #FFFFFF; } .type-face__box-item span::before { background-image: url('https://www.revia-kamisu.com/wp-content/uploads/2022/03/detail2.png'); background-repeat: no-repeat; content: " "; height: 30px; width: 46px; overflow: hidden; display: block; } .type-face__box-item .one::before { background-position: -41px -81px; } .type-face__box-item .one.on::before { background-position: -41px -129px; } .type-face__box-item .two::before { background-position: -121px -81px; } .type-face__box-item .two.on::before { background-position: -121px -129px; } .type-face__box-item .three::before { background-position: -201px -81px; } .type-face__box-item .three.on::before { background-position: -201px -129px; } .type-face__box-item .four::before { background-position: -281px -81px; } .type-face__box-item .four.on::before { background-position: -281px -129px; } .type-face__box-item .five::before { background-position: -361px -81px; } .type-face__box-item .five.on::before { background-position: -361px -129px; } @media screen and (max-width: 749px){ .mii_hair-contents__detail { display: block; } .mii_hair-contents__detail .mii_hair-image { text-align: center; } .mii_hair-contents__detail .mii_hair-information { width: 100%; max-width: 100%; } } @media screen and (max-width: 439px){ .mii_hair-information__item.type .mii_item-box { display: block; } .mii_item-box .type-hair, .mii_item-box .type-face { width: 100%; } .mii_item-box .type-face { margin-top: 5px; } } .comm { position: relative; padding: 1.5rem 1rem; margin-bottom:-5px !important: font-size:18px; color:#cd4d72; } .comm:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; content: ''; background-image: -webkit-repeating-linear-gradient(135deg, #cd4d72, #cd4d72 1px, transparent 2px, transparent 5px); background-image: repeating-linear-gradient(-45deg, #cd4d72, #cd4d72 1px, transparent 2px, transparent 5px); background-size: 7px 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .komidashih4 { font-size: 18px !important; /* フォントサイズを調整 */ padding: 3px; display: inline-block; border-bottom: 1px dotted #535353; margin-bottom:5px !important; } .box63 { padding: 0.5em 1em; margin: 2em 0; background: #e5f1f6; border: dotted 1px #67a9df;/*点線*/ } .box63 p { margin: 0; padding: 0; font-size:14px; line-height:1.7; } .box260 { position: relative; margin: 2em 0; padding: 0.5em 1em; border: solid 2px #2eaae0; border-radius: 8px; } .box260 .box-title { position: absolute; display: inline-block; top: -13px; left: 10px; padding: 0 9px; line-height: 1; font-size: 17px; background: #FFF; color: #2eaae0; font-weight: bold; } .box260 p { margin: 0; padding: 10px; } .box291 { margin: 2em 0; background: #fcf4f4; } .box291 .box-title { font-size: 1.2em; background: #cc0033; padding: 4px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.05em; } .box291 p { padding: 15px 20px; margin: 0; } #toc_container { margin: auto; margin-bottom:20px; } ol.sample11{ counter-reset:list; list-style-type:none; padding: 1.5em; margin-top:-50px; margin-bottom:-40px; } ol.sample11 li{ position:relative; line-height: 35px; margin: 10px 10px 10px 10px; padding-left: 10px; background: #eaf7fc; } ol.sample11 li:before{ counter-increment: list; content: counter(list); position: absolute; left: -40px; width: 30px; height: 30px; text-align: center; color: #fff; background: #65c6ef; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } ol.sample11 li:after{ content:""; display: block; position: absolute; left: -10px !important; height: 0; width: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid #65c6ef; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } ol.sample12{ counter-reset:list; list-style-type:none; font: 14px/1.6 'arial narrow', sans-serif; padding:0; } ol.sample12 li{ position:relative; padding: 0 0 0 20px; margin: 7px 0 7px 0px; font-weight: bold; font-size:14px; line-height: 30px; border-bottom: dotted 1px #0068b7; } ol.sample12 li:before{ counter-increment: list; content: ""; display: block; position: absolute; left: 0px; height: 0; width: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid #0068b7; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .heading12 { padding: 0.2rem; margin-bottom: 0.2rem; background: linear-gradient(transparent 60%, #acdff6 60%); font-weight: bold; font-size: 16px; display:inline-block; } .heading13 { padding: 8px 18px; border-left: 5px solid #2ea9df; font-size: 16px; background: #f4f4f4; display:inline-block; } .box3033 { margin: 2em 0; background: #fcfafa; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); } .box3033 .box-title { background: #2ea9df; padding: 4px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.05em; font-size:16px; } .box3033 p { padding: 15px 20px; margin: 0; font-size:15px; } .simple03 { padding: 8px 10px; border-left: 5px solid #000; font-size:22px; } h2.blue { position: relative; /* 擬似要素の配置に必要 */ color: #333; font-size:20px !important; font-weight:bold !important; padding-left: 20px; /* 縦棒分の余白を確保 */ line-height: 1.5; margin-bottom:30px; text-align:left !important; } h2.blue::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, #00749a, #88bed0); /* 縦棒のグラデーション */ border-radius: 2px; /* 丸みをつける場合 */ } .midashih2 { font-size:20px !important; font-weight:bold !important; padding: 0.5em 0.3em; margin-bottom:30px; position: relative; } .midashih2::before { content: ''; background: linear-gradient(to right, #155cb7, #33abe7); width: 50px; height: 3px; position: absolute; bottom: 0; left: 0; border-radius: 1.5px; /* 角丸設定 */ } .midashih3 { position: relative; /* 擬似要素の配置に必要 */ font-size: 18px !important; /* フォントサイズを調整 */ color: #333; /* 文字の色 */ margin: 10px 0; padding-left: 30px; /* 縦線分の余白 */ line-height: 1.5; /* 行間 */ margin-bottom:20px; } .midashih3::before { content: "—"; /* 横棒を指定 */ position: absolute; left: 0; top: 40%; transform: translateY(-50%); /* 縦位置を中央揃え */ color: #333; /* 横棒の色 */ font-size: 1.2em; /* 横棒のサイズを調整 */ } .content-box { border: 1px solid #e0e0e0; /* 枠線の色 */ padding: 20px; /* 内側の余白 */ background-color: #f9f9f9; /* 背景色 */ border-radius: 8px; /* 角の丸み */ max-width: 600px; /* コンテンツの幅を制限 */ margin: 20px auto; /* 中央寄せ */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 軽い影 */ } .point-title { font-size: 18px; /* フォントサイズ */ color: #007bff; /* 青色 */ font-weight: bold; /* 太字 */ margin-bottom: 10px; /* 下の余白 */ text-transform: uppercase; /* 大文字に変換 */ } .main-title { font-size: 1.5em; /* 見出しのサイズ */ color: #333; /* 文字色 */ font-weight: normal !important; /* 太字 */ margin-bottom: 20px; /* 下の余白 */ line-height: 1.8 !important; /* 行間 */ } .content-text { font-size: 1em; /* 通常の文字サイズ */ color: #555; /* テキストの色 */ line-height: 1.8; /* 行間 */ } .list-92 { list-style-type: disc; list-style-position: inside; } .list-92 li { padding: .5em; border-bottom: 1px dotted #155cb7; /* すべてのリスト項目に点線を適用 */ } .list-92 li::marker { color: #155cb7; font-size: 15px; } /* 最初に非表示（PC用） */ .sp_only { display: none; } /* スマホ画面（例: max-width 600px）でのみ改行を表示 */ @media screen and (max-width: 600px) { .sp_only { display: inline; } } /***********修正0520************/ .clearfix.package:after{ display: none; } .btn_more { text-align: center; } .price-list { max-width: 100%; margin: 0 auto; padding: 20px 16px; background: #fff; font-family: 'Helvetica Neue', sans-serif; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.05); } .price-list h2 { font-size: 1.4rem; margin-bottom: 12px; text-align: center; border-bottom: 2px solid #eee; padding-bottom: 8px; } .price-note { font-size: 0.95rem; color: #666; margin-bottom: 20px; text-align: center; } .price-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #e5e5e5; } .price-item .model { font-weight: 600; font-size: 1rem; color: #333; } .price-item .price { font-size: 1rem; color: #ff6600; font-weight: bold; } .original-button { display: flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none; color: #ffffff !important; font-size: 17px; border-radius: 25px; width: 300px; height: 50px; font-weight: bold; transition: 0.3s; background-color: #ff8a00; margin: 0 auto; /* これが重要 */ } .original-button2:hover { opacity: .7;} .original-button2 { display: flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none; color: #ffffff !important; font-size: 15px; border-radius: 25px; width: 250px; height: 40px; font-weight: bold; transition: 0.3s; background-color: #ff8a00; margin: 0; /* ← ここを修正 */ } .top-center-image { text-align: center; margin: 10px auto; margin-bottom:70px !important; 　margin-top:-20px !important; padding: 0 15px; /* ← 左右に15pxの余白を追加 */ } .top-center-image img { max-width: 100%; height: auto; display: inline-block; } /* 幅制限を解除して画面いっぱいに広げる */ .fullwidth { width: 100vw; max-width: 100vw !important; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* ========== サービス紹介（WordPressのベンリヤ版） ========== */ .plan_intro { background: linear-gradient(135deg, #0095c5, #00749a); /* WordPressブルーのグラデーション */ text-align: center; padding: 60px 20px 70px; } /* 見出し */ .plan_intro h2 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; text-align: center !important; color: #fff; font-size: 48px; font-weight: 900; margin-bottom: 10px; letter-spacing: 0.05em; text-shadow: 0 2px 4px rgba(0,0,0,0.2); } /* スマホ調整 */ @media screen and (max-width: 768px) { .plan_intro h2 { font-size: 24px; } } /* サブキャッチ */ .plan_intro .subcatch { font-size: 22px; text-align: center !important; font-family: "Kosugi Maru", "Noto Sans JP", sans-serif; font-weight: 700; color: #eaf4f8; /* 薄い水色でブルー背景に馴染ませる */ margin-bottom: 15px; } /* リード文 */ .plan_intro .lead { font-size: 16px; color: #eaf4f8; /* 見やすい淡青 */ line-height: 1.9; opacity: 0.95; } /* 内側に1200px幅のコンテナをつくる */ .plan_intro_inner { max-width: 1200px; margin: 0 auto; text-align: left; /* ここで lead を左寄せにできる */ } /* リード文 */ .plan_intro .lead { font-size: 16px; color: #eaf4f8; line-height: 1.9; opacity: 0.95; margin-top: 30px; } /* ========== 美容室向けサービス紹介セクション ========== */ .salon_service { max-width: 1200px; margin: 60px auto; padding: 0 20px; } .salon_service h3 { font-size: 24px; color: #ff8a00; margin-bottom: 20px; border-left: 5px solid #ffb347; padding-left: 10px; } .salon_service p { font-size: 15px; margin-bottom: 20px; } /* ▼ 疑似リスト風のブロック（ul/liを使わない） */ .salon_service .list_block { background: #fff7ec; border: 1px solid #ffe1b2; border-radius: 8px; padding: 20px; } .salon_service .list_item { position: relative; padding-left: 18px; margin-bottom: 10px; font-size: 15px; } .salon_service .list_item::before { content: "●"; color: #ff8a00; position: absolute; left: 0; top: 0; font-size: 12px; line-height: 1.6; } /* ========== CTAボタン ========== */ .btn { background-color: #ff8a00; color: #fff; padding: 12px 30px; border-radius: 6px; text-decoration: none; font-weight: 600; display: inline-block; transition: 0.3s; margin-top: 30px; font-size: 15px; } .btn:hover { background-color: #ff9f33; } /* ベースレイアウト */ .service_box { max-width: 500px; margin: 0 auto 60px; text-align: center; background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .service_box:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); } /* ベースレイアウト */ .service_box { max-width: 500px; margin: 0 auto 60px; text-align: center; background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .service_box:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); } /* ▼ レイアウト全体 */ .service_area { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; /* 2列間の余白をコンパクトに */ max-width: 1080px; margin: 0 auto 80px; padding: 0 20px; } /* ▼ 各カード */ .service_box { flex: 1 1 calc(50% - 24px); /* 2列 */ background: #fff; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.05); overflow: hidden; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; align-items: center; } .service_box:hover { transform: translateY(-4px); box-shadow: 0 5px 14px rgba(0,0,0,0.1); } /* ▼ 全体レイアウト */ .service_area { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: 1080px; margin: 0 auto 80px; padding: 0 20px; } /* ▼ 各カード */ .service_box { flex: 1 1 calc(50% - 24px); background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); overflow: hidden; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; align-items: center; } .service_box:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); } /* ▼ 全体レイアウト */ .service_area { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: 1080px; margin: 0 auto 10px; padding: 0 10px; } /* ▼ 各カード */ .service_box { flex: 1 1 calc(50% - 24px); background: #fff !important; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; overflow: hidden; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; align-items: center; } .service_box:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important; } /* ▼ 画像 */ .service_box figure { margin: 0; width: 100%; } .service_box img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 3px solid #00749a !important; display: block; } /* ▼ 画像 */ .service_box figure { margin: 0; width: 100%; } .service_box img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 3px solid #00749a !important; display: block; } /* ▼ テキスト部分 */ .service_text { padding: 24px 20px 32px; flex: 1; } .service_text h3 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif !important; font-weight: 900; font-size: 20px; color: #333 !important; margin-bottom: 10px; } .service_text .desc { font-family: "Kosugi Maru", sans-serif !important; font-size: 15px; color: #555 !important; line-height: 1.7; text-align: left; max-width: 90%; margin: 0 auto; } /* ▼ スマホ対応 */ @media screen and (max-width: 768px) { .service_area { flex-direction: column; gap: 20px; margin-bottom: 60px; } .service_box { flex: 1 1 100%; max-width: 100%; margin: 0 auto; background: #fff !important; box-shadow: 0 3px 10px rgba(0,0,0,0.08) !important; } .service_box img { border-bottom: 3px solid #00749a !important; } .service_text { padding: 20px 16px 26px; } .service_text h3 { font-size: 18px; color: #333 !important; } .service_text .desc { font-size: 14px; color: #555 !important; line-height: 1.6; } } /* ▼ テキスト部分 */ .service_text { padding: 24px 20px 32px; flex: 1; } .service_text h3 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif !important; font-weight: 900; font-size: 22px; color: #333 !important; margin-bottom: 10px; } .service_text .price { font-size: 20px; font-weight: 700; color: #333; margin-bottom: 5px; } .service_text .desc { font-family: "Kosugi Maru", sans-serif !important; font-size: 15px; color: #555 !important; line-height: 1.7; text-align: left; max-width: 90%; margin: 0 auto; } .service_box { flex: 1 1 calc(50% - 24px); background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); overflow: hidden; text-align: center; display: flex; flex-direction: column; align-items: center; } /* hover時のアニメーション削除 */ .service_box:hover { transform: none; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: none; } /* transition自体を無効化 */ .service_box, .service_box * { transition: none !important; } .service_area .service_box .service_text .price .pri { font-size: 36px !important; color:#00749a; } /* ------------------------------ おすすめエリア ------------------------------ */ .recommend_area { background: #f4f8fa; padding: 80px 20px; text-align: center; } .recommend_area h2 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-weight: 900; font-size: 28px; color: #333; margin-bottom: 50px; letter-spacing: 0.05em; } /* ▼ 横3列レイアウト */ .recommend_wrap { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: stretch !important; gap: 30px !important; max-width: 1200px !important; margin: 0 auto !important; box-sizing: border-box; } .recommend_box { flex: 0 0 calc(33.333% - 20px) !important; width: calc(33.333% - 20px) !important; background: #fff !important; border-radius: 12px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; padding: 30px 20px 40px !important; text-align: center !important; box-sizing: border-box; transition: none !important; } .recommend_box figure { margin: 0 auto 20px !important; max-width: 300px !important; } .recommend_box img { width: 100% !important; height: auto !important; display: block !important; } .recommend_box h3 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif !important; font-size: 18px !important; font-weight: 700 !important; color: #00749a !important; margin-bottom: 10px !important; } .recommend_box p { font-family: "Kosugi Maru", sans-serif !important; font-size: 15px !important; color: #555 !important; line-height: 1.7 !important; margin: 0 !important; text-align: left !important; } /* ------------------------------ スマホ表示 ------------------------------ */ @media screen and (max-width: 768px) { .recommend_wrap { flex-direction: column !important; gap: 20px !important; } .recommend_box { width: 100% !important; flex: 1 1 100% !important; padding: 24px 16px 32px !important; } .recommend_area h2 { font-size: 22px !important; margin-bottom: 40px !important; } } .recommend_area body .recommend_wrap .recommend_box p { text-align: left !important; } .flow_area { background: #fff; padding: 80px 20px; max-width: 1200px; margin: 0 auto; } .flow_area h2 { text-align: center; font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-weight: 900; font-size: 28px; color: #333; margin-bottom: 60px; position: relative; } .timeline { position: relative; margin-left: 30px; border-left: 3px solid #00749a; padding-left: 30px; } .flow_step { position: relative; margin-bottom: 50px; } .flow_step:last-child { margin-bottom: 0; } .circle { position: absolute; left: -47px; top: 0; width: 34px; height: 34px; border-radius: 50%; background: #00749a; color: #fff; font-weight: 700; font-size: 16px; line-height: 34px; text-align: center; font-family: "Zen Kaku Gothic New", sans-serif; } .flow_step h3 { font-size: 18px; color: #00749a; font-weight: 700; margin-bottom: 8px; font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; } .flow_step p { font-family: "Kosugi Maru", sans-serif; font-size: 15px; color: #555; line-height: 1.8; margin: 0; } /* スマホ対応 */ @media screen and (max-width: 768px) { .flow_area { padding: 60px 20px; } .timeline { margin-left: 20px; padding-left: 25px; } .circle { left: -39px; width: 28px; height: 28px; font-size: 14px; line-height: 28px; } .flow_step { margin-bottom: 40px; } } .contact_lead h2 { font-family: "Kosugi Maru", sans-serif; font-size: 28px; text-align: center; color: #00749a; margin-bottom: 20px; } .contact_lead p { font-size: 16px; line-height: 1.9; color: #333; margin: 0 auto; } /* スマホ */ @media screen and (max-width: 768px) { .contact_lead { padding: 60px 15px; } .contact_lead h2 { font-size: 22px; text-align: center; } .contact_lead p { font-size: 15px; text-align: left; } } /* コンタクトセクション */ .contact_section { background: #f4f8fa; padding: 50px 20px; } .contact_section .contact_inner { max-width: 1200px; margin: 0 auto; overflow: hidden; /* clearfixの代替にもなる */ padding: 0 5%; /* ← 全体に左右余白を加える */ } /* 左右配置 */ .contact_section .contact_inner .contact_image { float: left; width: 40%; text-align: center; padding-bottom:25px; } .contact_section .contact_inner .contact_image img { max-width: 95%; height: auto; } .contact_section .contact_inner .contact_text { float: right; width: 50%; /* ← 少し幅を減らして */ margin-right: 5%; /* ← 右に余白を確保して中央寄せ気味に */ text-align: left; margin-top:20px; } /* clearfix：float解除 */ .contact_section .contact_inner::after { content: ""; display: block; clear: both; } /* テキスト装飾 */ .contact_section .contact_text h2 { color: #00749a; font-size: 26px; margin-bottom: 15px; } .contact_section .contact_text p { font-size: 16px; line-height: 1.8; color: #333; margin-bottom: 15px; } .contact_section .contact_number a { font-size: 32px; font-weight: 700; color: #00749a; text-decoration: none; } .contact_section .contact_btn a { display: inline-block; background: #00749a; color: #fff; font-weight: 700; text-decoration: none; padding: 12px 36px; border-radius: 30px; transition: 0.3s; } .contact_section .contact_btn a:hover { background: #00749a; } /* スマホ時（縦並びに戻す） */ @media screen and (max-width: 768px) { .contact_section .contact_inner .contact_image, .contact_section .contact_inner .contact_text { float: none; width: 100%; } .contact_section .contact_inner .contact_image img { max-width: 300px; margin-bottom: 20px; } } .text_update_section { background: #f4f8fa; padding: 80px 20px; } .text_update_section .inner { max-width: 1200px; margin: 0 auto; } .text_update_section h2 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-size: 28px; font-weight: 900; text-align: center; color: #333; margin-bottom: 60px; letter-spacing: 0.05em; } .text_update_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; } .text_update_box { background: #fff; flex: 0 0 calc(33.333% - 20px); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 30px 24px 36px; box-sizing: border-box; } .text_update_box h3 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-size: 18px; font-weight: 700; color: #00749a; margin-bottom: 12px; } .text_update_box p { font-family: "Kosugi Maru", sans-serif; font-size: 15px; color: #555; line-height: 1.8; } /* スマホ対応 */ @media screen and (max-width: 768px) { .text_update_wrap { flex-direction: column; gap: 20px; } .text_update_box { flex: 1 1 100%; padding: 24px 16px 32px; } .text_update_section h2 { font-size: 22px; margin-bottom: 40px; } .text_update_box h3 { font-size: 16px; } .text_update_box p { font-size: 14px; } } /* ========================================= テキスト修正・更新代行 導入エリア ========================================= */ .text_update_intro { background: #fff; padding: 80px 20px 60px; } .text_update_intro .inner { max-width: 1200px; margin: 0 auto; } .text_update_intro h2 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-size: 28px; font-weight: 900; color: #333; text-align: center; margin-bottom: 40px; letter-spacing: 0.05em; } .text_update_intro p { font-family: "Kosugi Maru", sans-serif; font-size: 16px; line-height: 1.9; color: #444; margin: 0 auto 20px; text-align: left; } /* スマホ対応 */ @media screen and (max-width: 768px) { .text_update_intro { padding: 60px 16px 40px; } .text_update_intro h2 { font-size: 22px; margin-bottom: 30px; } .text_update_intro p { font-size: 15px; } } /* ========================================= テキスト修正・更新でできること ========================================= */ .text_update_section { background: #f4f8fa; padding: 80px 20px; } .text_update_section .inner { max-width: 1200px; margin: 0 auto; } .text_update_section h2 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-size: 28px; font-weight: 900; text-align: center; color: #333; margin-bottom: 60px; letter-spacing: 0.05em; } .text_update_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; } .text_update_box { background: #fff; flex: 0 0 calc(33.333% - 20px); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 30px 24px 36px; box-sizing: border-box; } .text_update_box h3 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-size: 18px; font-weight: 700; color: #00749a; margin-bottom: 12px; } .text_update_box p { font-family: "Kosugi Maru", sans-serif; font-size: 15px; color: #555; line-height: 1.8; } /* スマホ対応 */ @media screen and (max-width: 768px) { .text_update_wrap { flex-direction: column; gap: 20px; } .text_update_box { flex: 1 1 100%; padding: 24px 16px 32px; } .text_update_section h2 { font-size: 22px; margin-bottom: 40px; } .text_update_box h3 { font-size: 16px; } .text_update_box p { font-size: 14px; } } /* ========================================= テキスト修正・更新でできること（差別化版） ========================================= */ .text_update_section.alt_style { background: linear-gradient(to bottom, #f4f8fa 0%, #f4f8fa 100%); padding: 100px 20px; } .text_update_section.alt_style .inner { max-width: 1200px; margin: 0 auto; } .text_update_section.alt_style h2 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-size: 26px; font-weight: 900; text-align: center; color: #00749a; margin-bottom: 60px; position: relative; } .text_update_section.alt_style h2::after { content: ""; position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: #00749a; border-radius: 2px; } .text_update_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; } .text_update_box { flex: 0 0 calc(33.333% - 20px); background: #fff; border: 2px solid #d8e6eb; border-radius: 12px; padding: 40px 24px 36px; box-sizing: border-box; position: relative; text-align: left; box-shadow: 0 2px 6px rgba(0,0,0,0.03); } .text_update_box .num { position: absolute; top: -18px; left: 20px; background: #00749a; color: #fff; font-size: 22px; font-weight: 700; border-radius: 20px; padding: 4px 12px; font-family: "Zen Kaku Gothic New", sans-serif; } .text_update_box h3 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-size: 18px; font-weight: 700; color: #333; margin-bottom: 12px; } .text_update_box p { font-family: "Kosugi Maru", sans-serif; font-size: 15px; color: #555; line-height: 1.8; } /* スマホ対応 */ @media screen and (max-width: 768px) { .text_update_section.alt_style { padding: 60px 16px; } .text_update_section.alt_style h2 { font-size: 22px; margin-bottom: 40px; } .text_update_box { flex: 1 1 100%; padding: 30px 18px; } .text_update_box .num { top: -14px; left: 16px; font-size: 20px; } .text_update_box h3 { font-size: 16px; } .text_update_box p { font-size: 14px; } } /* ========================================= テキスト修正・更新代行メニュー（メニュー表デザイン） ========================================= */ .text_menu_area { background: #fff; padding: 80px 20px; } .text_menu_area .inner { max-width: 1200px; margin: 0 auto; } .text_menu_area h2 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-size: 28px; font-weight: 900; color: #00749a; text-align: center; margin-bottom: 60px; letter-spacing: 0.05em; } .menu_box { background: #f4f8fa; border: 1px solid #d8e6eb; border-radius: 12px; padding: 40px 40px 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); } .menu_item { border-bottom: 1px solid #d8e6eb; padding: 20px 0 22px; } .menu_item:last-child { border-bottom: none; } .menu_header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .menu_title { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-size: 18px; font-weight: 700; color: #333; } .menu_price { font-family: "Barlow Condensed", sans-serif; font-size: 20px; font-weight: 700; color: #00749a; } .menu_desc { font-family: "Kosugi Maru", sans-serif; font-size: 15px; color: #555; line-height: 1.8; margin: 0; } /* スマホ対応 */ @media screen and (max-width: 768px) { .text_menu_area { padding: 60px 15px; } .text_menu_area h2 { font-size: 22px; margin-bottom: 40px; } .menu_box { padding: 24px 16px; } .menu_title { font-size: 16px; } .menu_price { font-size: 18px; } .menu_desc { font-size: 14px; } } /* =========================================== ご依頼の流れセクション （更新代行EX / 共通デザイン） =========================================== */ .flow_area { background: #fff; padding: 80px 20px; max-width: 1200px; margin: 0 auto; } .flow_area h2 { text-align: center; font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-weight: 900; font-size: 28px; color: #333; margin-bottom: 60px; position: relative; } /* タイムライン線 */ .timeline { position: relative; margin-left: 30px; border-left: 3px solid #00749a; padding-left: 30px; } /* ステップ全体 */ .flow_step { position: relative; margin-bottom: 50px; background: #fff; border-radius: 12px; padding: 20px 25px 25px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border: 1px solid #d8e6eb; } .flow_step:last-child { margin-bottom: 0; } /* ステップ番号 */ .step_num { position: absolute; left: -47px; top: 20px; width: 34px; height: 34px; border-radius: 50%; background: #00749a; color: #fff; font-weight: 700; font-size: 16px; line-height: 34px; text-align: center; font-family: "Zen Kaku Gothic New", sans-serif; box-shadow: 0 3px 6px rgba(0,0,0,0.1); } /* タイトル */ .step_title { font-size: 18px; color: #00749a; font-weight: 700; margin-bottom: 8px; font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; } /* 説明文 */ .step_desc { font-family: "Kosugi Maru", sans-serif; font-size: 15px; color: #555; line-height: 1.8; margin: 0; } /* --- STEP1 メールフォームボタン --- */ .flow_btn_wrap { margin-top: 20px; } .flow_btn { display: inline-block; background: #00749a; color: #fff; font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-size: 15px; font-weight: 700; text-decoration: none; padding: 12px 32px; border-radius: 25px; transition: 0.3s ease; box-shadow: 0 3px 8px rgba(0,0,0,0.1); } .flow_btn:hover { background: #00749a; box-shadow: 0 5px 10px rgba(0,0,0,0.15); transform: translateY(-2px); } /* =========================================== スマホ対応 =========================================== */ @media screen and (max-width: 768px) { .flow_area { padding: 60px 15px; } .timeline { margin-left: 20px; padding-left: 25px; } .flow_step { margin-bottom: 40px; padding: 20px; } .step_num { left: -39px; width: 28px; height: 28px; font-size: 14px; line-height: 28px; } .step_title { font-size: 16px; } .step_desc { font-size: 14px; line-height: 1.7; } .flow_btn { font-size: 14px; padding: 10px 28px; } } /* =========================================== テキスト修正・更新イントロ =========================================== */ .text_update_intro { background: #fff; padding: 80px 20px; } .text_update_intro .inner { max-width: 1200px; margin: 0 auto; } .text_update_intro h2 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-weight: 900; font-size: 28px; color: #00749a; text-align: center; margin-bottom: 50px; line-height: 1.4; } .text_update_content { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; } .text_update_text { flex: 1; } .text_update_text p { font-family: "Kosugi Maru", sans-serif; font-size: 16px; line-height: 1.9; color: #444; margin-bottom: 20px; } .text_update_text strong { color: #00749a; font-weight: 700; } .text_update_image { flex: 0 0 40%; text-align: center; } .text_update_image img { max-width: 90%; height: auto; border-radius: 12px; } /* スマホ対応 */ @media screen and (max-width: 768px) { .text_update_content { flex-direction: column; gap: 20px; } .text_update_image { order: -1; width: 100%; text-align: center; margin-bottom: 10px; } .text_update_intro h2 { font-size: 22px; margin-bottom: 30px; } .text_update_text p { font-size: 15px; } } #side_col { background-color:#88bed0; height: 30px !important; margin-top: 0; padding: 0; } /* ---------------------------------------------------- 詳しくはこちらボタン（静的タイプ） ---------------------------------------------------- */ .btn_wrap { text-align: center; margin-top: 20px; } .btn_detail { display: inline-block; background-color: #00749a; color: #fff; font-size: 16px; font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-weight: 600; text-decoration: none; padding: 12px 28px; border-radius: 20px; letter-spacing: 0.05em; transition: background-color 0.3s ease, color 0.3s ease; } .btn_detail:hover { background-color: #00749a; color: #fff; } /* スマホ用 */ @media screen and (max-width: 768px) { .btn_detail { font-size: 14px; padding: 10px 24px; } } .rewrite_example_area h2, .rewrite_point_area h2 { font-size: 26px; color: #333; text-align: center; margin-bottom: 40px; } .rewrite_case { margin-bottom: 60px; } .rewrite_case h3 { font-size: 20px; margin-bottom: 15px; color: #00749a; } .rewrite_box { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; background: #fff; border: 1px solid #d8e6eb; border-radius: 12px; box-shadow: 0 3px 6px rgba(0,0,0,0.05); padding: 20px; } .rewrite_box .before, .rewrite_box .after { width: 48%; } .rewrite_box h4 { font-size: 16px; color: #00749a; margin-bottom: 10px; } .rewrite_box p { font-size: 15px; color: #444; font-weight:normal; line-height: 2.2; } @media (max-width: 768px) { .rewrite_box { flex-direction: column; } .rewrite_box .before, .rewrite_box .after { width: 100%; } } .rewrite_point_area { background: #f4f8fa; padding: 60px 20px; } .rewrite_point_area .inner { max-width: 1200px; margin: 0 auto; } .rewrite_point_area h2 { font-size: 26px; color: #333; text-align: center; margin-bottom: 40px; } /* ▼ 3列レイアウト調整 */ .point_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 10px; /* ← 縦の間隔を詰める */ column-gap: 2%; /* ← パーセント指定で自然な余白 */ box-sizing: border-box; padding:15px; } .point_box { flex: 0 0 32%; /* ← 3列固定幅 */ background: #fff; border: 1px solid #d8e6eb; border-radius: 12px; box-shadow: 0 3px 6px rgba(0,0,0,0.05); padding: 14px 18px; margin: 0; box-sizing: border-box; transition: none; margin-bottom:10px; } .point_box h3 { font-size: 16px; color: #00749a; font-weight: 700; margin-bottom: 6px; } .point_box p { font-size: 14px; color: #444; line-height: 1.8; margin: 0; } /* ▼ スマホ表示（1列に） */ @media screen and (max-width: 768px) { .point_wrap { flex-direction: column; row-gap: 12px; } } .point_box { width: 100%; flex: 1 1 100%; padding: 14px 16px; } .rewrite_example_area h2, .rewrite_point_area h2 { font-size: 26px; color: #333; text-align: center; margin-bottom: 40px; } .rewrite_case { margin-bottom: 60px; } .rewrite_case h3 { font-size: 20px; margin-bottom: 15px; color: #00749a; } .rewrite_box { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; background: #fff; border: 1px solid #d8e6eb; border-radius: 12px; box-shadow: 0 3px 6px rgba(0,0,0,0.05); padding: 20px; } .rewrite_box .before, .rewrite_box .after { width: 48%; } .rewrite_box h4 { font-size: 16px; color: #00749a; margin-bottom: 10px; } .rewrite_box p { font-size: 15px; color: #444; font-weight:normal; line-height: 2.2; } @media (max-width: 768px) { .rewrite_box { flex-direction: column; } .rewrite_box .before, .rewrite_box .after { width: 100%; } } .rewrite_point_area { background: #f4f8fa; padding: 60px 20px; } .rewrite_point_area .inner { max-width: 1200px; margin: 0 auto; } .rewrite_point_area h2 { font-size: 26px; color: #333; text-align: center; margin-bottom: 40px; } /* ▼ 3列レイアウト調整 */ .point_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 10px; /* ← 縦の間隔を詰める */ column-gap: 2%; /* ← パーセント指定で自然な余白 */ box-sizing: border-box; padding:15px; } .point_box { flex: 0 0 32%; /* ← 3列固定幅 */ background: #fff; border: 1px solid #d8e6eb; border-radius: 12px; box-shadow: 0 3px 6px rgba(0,0,0,0.05); padding: 14px 18px; margin: 0; box-sizing: border-box; transition: none; margin-bottom:10px; } .point_box h3 { font-size: 16px; color: #00749a; font-weight: 700; margin-bottom: 6px; } .point_box p { font-size: 14px; color: #444; line-height: 1.8; margin: 0; } /* ▼ スマホ表示（1列に） */ @media screen and (max-width: 768px) { .point_wrap { flex-direction: column; row-gap: 12px; } .point_box { width: 100%; flex: 1 1 100%; padding: 14px 16px; } .rewrite_point_area h2 { font-size: 22px; margin-bottom: 30px; } } /* =========================================== strength_section（更新代行EXの強み） =========================================== */ .strength_section { background: #fff; padding: 30px 20px; } .strength_section .inner { max-width: 1200px; margin: 0 auto; } .strength_section h2 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-weight: 900; font-size: 28px; color: #333; text-align: center; margin-bottom: 40px; letter-spacing: 0.05em; } .strength_section .lead { font-family: "Kosugi Maru", sans-serif; font-size: 16px; color: #444; text-align: center; line-height: 1.9; margin-bottom: 60px; } .strength_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; } .strength_box { flex: 0 0 calc(33.333% - 20px); background: #f4f8fa; border: 1px solid #d8e6eb; border-radius: 12px; box-shadow: 0 3px 8px rgba(0,0,0,0.05); padding: 30px 20px 40px; text-align: left; box-sizing: border-box; } .strength_box h3 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-size: 18px; font-weight: 700; color: #00749a; margin-bottom: 12px; } .strength_box p { font-family: "Kosugi Maru", sans-serif; font-size: 15px; color: #444; line-height: 1.8; margin: 0; } /* スマホ対応 */ @media screen and (max-width: 768px) { .strength_section { padding: 60px 16px; } .strength_section h2 { font-size: 22px; margin-bottom: 30px; } .strength_section .lead { font-size: 15px; margin-bottom: 40px; } .strength_wrap { flex-direction: column; gap: 20px; } .strength_box { width: 100%; flex: 1 1 100%; padding: 24px 20px 30px; } } /* ========================================= salon.css 美容系ポータルサイト更新代行ページ用 ========================================= */ /* ========================================= salon.css 美容系ポータルサイト更新代行ページ用 ========================================= */ /* ---------------------------------------- 共通レイアウト ---------------------------------------- */ .inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .h22 { font-size: 28px !important; font-family: "Zen Kaku Gothic New", sans-serif; margin-bottom: 40px!important; text-align: center; color: #333; } /* ---------------------------------------- イントロ ---------------------------------------- */ .salon_intro_content { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; } .salon_intro_text { flex: 1; } .salon_intro_text .subcatch { font-size: 16px; color: #00749a; font-weight: bold; margin-bottom: 15px; } .salon_intro_text .lead { line-height: 1.9; color: #444; } .salon_intro_image { flex: 1; text-align: center; } .salon_intro_image img { width: 90%; height: auto; } /* ---------------------------------------- サービス概要 ---------------------------------------- */ .salon_service .service_block { display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap; } .salon_service .text { flex: 1; line-height: 1.9; color: #444; } .salon_service strong { color: #00749a; } /* ---------------------------------------- 更新代行をご利用いただくメリット（3列固定） ---------------------------------------- */ .salon_merit { margin-bottom: 30px; } .salon_merit .merit_list { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; } .salon_merit .merit_item { flex: 1 1 calc(33.333% - 20px); min-width: 360px; /* PC3列維持 */ background: #f4f8fa; border-radius: 12px; padding: 25px 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); box-sizing: border-box; } .salon_merit .merit_item h3 { color: #00749a; font-size: 18px; margin-bottom: 10px; } .salon_merit .merit_item p { color: #444; line-height: 1.8; } /* ---------------------------------------- おすすめ ---------------------------------------- */ .salon_recommen .recommen_wrap { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; } .salon_recommen .recommen_box p { background: #f4f8fa; border-left: 5px solid #00749a; padding: 10px 15px; border-radius: 8px; font-weight: 500; color: #333; } /* ---------------------------------------- 更新代行EXの強み（3列固定） ---------------------------------------- */ .salon_strength .strength_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; } .salon_strength .strength_box { flex: 1 1 calc(33.333% - 20px); min-width: 360px; /* PC3列維持 */ background: #fff; border: 1px solid #d8e6eb; border-radius: 12px; text-align: center; padding: 15px 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); box-sizing: border-box; } .salon_strength .strength_box h3 { color: #00749a; font-size: 18px; margin-bottom: 10px; } .salon_strength .strength_box p { color: #444; line-height: 1.8; margin-bottom: 15px; } .salon_strength .strength_image img { width: 90%; height: auto; border-radius: 10px; margin-top: 10px; } /* ---------------------------------------- ご依頼の流れ（4ステップ） ---------------------------------------- */ .salon_flow .flow02_wrap02 { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; } .salon_flow .flow02_step02 { flex: 1 1 calc(25% - 30px); background: #fff; border: 1px solid #d8e6eb; border-radius: 12px; padding: 25px 20px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.05); box-sizing: border-box; } .salon_flow .step02_num02 { font-size: 24px; color: #00749a; font-weight: bold; display: block; margin-bottom: 10px; } /* ---------------------------------------- 注意事項 ---------------------------------------- */ .salon_notice .notice_wrap { background: #fff; border-radius: 12px; padding: 20px; border: 1px solid #d8e6eb; line-height: 1.8; color: #444; } /* ---------------------------------------- CTA ---------------------------------------- */ .salon_cta { text-align: center; padding: 60px 0 40px; } .salon_cta .cta_text { font-size: 20px; color: #444; font-family: "Kosugi Maru", sans-serif; } /* ---------------------------------------- レスポンシブ調整 ---------------------------------------- */ @media (max-width: 1024px) { .salon_strength .strength_box, .salon_merit .merit_item { flex: 1 1 calc(50% - 20px); } .salon_flow .flow02_step02 { flex: 1 1 calc(50% - 20px); } } @media (max-width: 768px) { .salon_intro_content, .salon_service .service_block { flex-direction: column; } .salon_strength .strength_box, .salon_merit .merit_item, .salon_flow .flow02_step02 { flex: 1 1 100%; min-width: auto; } .h22 { font-size: 22px; } } .salon_recommen .inner .h22 { margin-top: 20px; } .salon_recommen .inner .h22 { margin-top: 20px; } .salon_flow .inner .h22 { margin-top: 20px; } .salon_notice .inner .h22 { margin-top: 20px; } //* ===================================================== 更新代行を利用するメリット（静的レイアウト版） ===================================================== */ .update_merit_section { background: #f4f8fa; padding: 80px 20px; color: #333; font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; } .update_merit_section .inner { max-width: 1200px; margin: 0 auto; } .update_merit_wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .update_merit_box { background: #fff; border: 1px solid #d8e6eb; border-radius: 12px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04); padding: 40px 30px 30px; position: relative; text-align: left; } .update_merit_box .num { display: inline-block; background: #00749a; color: #fff; font-size: 16px; font-weight: 700; border-radius: 50%; width: 36px; height: 36px; line-height: 36px; text-align: center; margin-bottom: 20px; } .update_merit_box h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; line-height: 1.5; color: #333; } .update_merit_box p { font-size: 15px; line-height: 1.9; color: #555; } /* --- レスポンシブ対応 --- */ @media screen and (max-width: 1024px) { .update_merit_wrap { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media screen and (max-width: 768px) { .update_merit_section { padding: 60px 15px; } .update_merit_wrap { grid-template-columns: 1fr; gap: 20px; } .update_merit_box { padding: 30px 20px; } } /* ===================================================== リード文囲みデザイン（update_merit_section内） ===================================================== */ .leader { border: 2px solid #d8e6eb; background: #fff; border-radius: 12px; padding: 25px 30px; margin-top: 60px; font-size: 2.2; color: #333; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03); } .leader strong { color: #00749a; font-weight: 700; } /* --- レスポンシブ対応 --- */ @media screen and (max-width: 768px) { .leader { padding: 20px; font-size: 15px; line-height: 1.8; margin-top: 40px; } } /* ===================================================== ご依頼の流れへの導入ブロック ===================================================== */ .update_call_to_action { background: #f4f8fa; border: 1px solid #d8e6eb; border-radius: 12px; text-align: center; padding: 30px 20px; margin: 40px auto 60px; max-width: 1200px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03); } .update_call_to_action .catch { font-size: 22px; font-weight: 700; color: #00749a; line-height: 1.6; margin-bottom: 15px; } .update_call_to_action .leaders { font-size: 16px; text-align:left; line-height: 1.9; color: #333; } @media screen and (max-width: 768px) { .update_call_to_action { padding: 40px 15px; margin: 60px auto 40px; } .update_call_to_action .catch { font-size: 18px; } .update_call_to_action .leaders { font-size: 15px; text-align:left; } } /* ===================================================== FAQセクション（cp_qa01） ===================================================== */ .update_faq_section { background: #fff; padding: 80px 20px; color: #333; } .update_faq_section .inner { max-width: 1000px; margin: 0 auto; } .update_faq_section h2 { text-align: center; font-size: 28px; font-weight: 700; margin-bottom: 20px; color: #333; } .update_faq_section .lead { text-align: center; font-size: 16px; line-height: 1.9; color: #555; margin-bottom: 50px; } /* --- QA基本構造 --- */ .cp_qa01 dl { border-top: 1px solid #d8e6eb; } .cp_qa01 dt { position: relative; cursor: pointer; font-weight: 700; font-size: 16px; line-height: 1.8; padding: 18px 50px 18px 15px; border-bottom: 1px solid #d8e6eb; background: #f4f8fa; transition: background 0.2s; } .cp_qa01 dt::after { content: "＋"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: #00749a; font-size: 20px; transition: transform 0.3s; } .cp_qa01 dt.open::after { content: "－"; } .cp_qa01 dd { display: none; padding: 20px 20px 25px; font-size: 15px; font-weight:normal !important; line-height: 1.9; color: #444; border-bottom: 1px solid #d8e6eb; background: #fff; } /* --- レスポンシブ --- */ @media screen and (max-width: 768px) { .update_faq_section { padding: 60px 15px; } .cp_qa01 dt { font-size: 15px; padding: 16px 40px 16px 12px; } .cp_qa01 dd { font-size: 14px; } } .cp_qa01 dd { display: none; height: 0; overflow: hidden; opacity: 0; transition: height 0.4s ease, opacity 0.4s ease; } /* ===================================================== 更新代行EXのお約束 ===================================================== */ .promise_section { background: #fff; padding: 80px 20px; color: #333; } .promise_section .inner { max-width: 1200px; margin: 0 auto; } .promise_section h2 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; text-align: center; font-size: 28px; font-weight: 700; color: #333; margin-bottom: 25px; } .promise_section .lead { text-align: center; font-size: 16px; color: #555; line-height: 1.9; margin-bottom: 60px !important; } .promise_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; } .promise_box { flex: 1 1 calc(33.333% - 40px); background: #f4f8fa; border: 1px solid #d8e6eb; border-radius: 12px; padding: 40px 30px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); position: relative; transition: transform 0.2s ease; } .promise_box:hover { transform: none; } .promise_box .num { position: absolute; top: -18px; left: 20px; background: #00749a; color: #fff; font-size: 18px; font-weight: 700; padding: 6px 14px; border-radius: 20px; } .promise_box h3 { font-size: 18px; font-weight: 700; margin-bottom: 15px; color: #333; } .promise_box p { font-size: 15px; line-height: 1.8; color: #555; } /* --- レスポンシブ --- */ @media screen and (max-width: 900px) { .promise_wrap { flex-direction: column; gap: 25px; } .promise_box { flex: 1 1 100%; } } /* ===================================================== WordPressの更新でできること（6ブロック版） ===================================================== */ .wp_update_section { background: #fff; padding: 80px 20px; color: #333; } .wp_update_section .inner { max-width: 1200px; margin: 0 auto; } .wp_update_section h2 { text-align: center; font-size: 28px; font-weight: 700; margin-bottom: 50px; font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; color: #333; } .wp_update_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; } .wp_update_box { flex: 1 1 calc(33.333% - 30px); background: #f4f8fa; border: 1px solid #d8e6eb; border-radius: 12px; padding: 35px 30px 40px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); } .wp_update_box h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; color: #00749a; text-align: center; } .wp_update_box ul { list-style: none; padding: 0; margin: 0; } .wp_update_box li { font-size: 15px; color: #444; line-height: 1.8; padding-left: 1.2em; position: relative; margin-bottom: 6px; } .wp_update_box li::before { content: "・"; position: absolute; left: 0; color: #00749a; font-weight: bold; } /* --- レスポンシブ --- */ @media screen and (max-width: 900px) { .wp_update_wrap { flex-direction: column; } .wp_update_box { flex: 1 1 100%; } } /* 注意事項ボックス */ .wp_notice_box { background: #f4f8fa; border: 1px solid #d8e6eb; border-radius: 12px; padding: 40px 30px; margin-top: 60px; box-shadow: 0 3px 10px rgba(0,0,0,0.05); } .wp_notice_box h3 { font-size: 20px; color: #00749a; font-weight: 700; margin-bottom: 15px; text-align: center; } .wp_notice_box p { font-size: 15px; line-height: 1.9; color: #444; text-align: left; max-width: 1100px; margin: 0 auto; } @media screen and (max-width: 768px) { .wp_notice_box { padding: 30px 20px; } .wp_notice_box h3 { font-size: 18px; } } /* コンテナ */ .service_list_section .inner { max-width: 1200px; margin: 0 auto; padding: 20px 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } /* 各カード */ .service_item { background: #fff; border: 1px solid #d8e6eb; border-radius: 12px; padding: 25px 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); display: flex; flex-direction: column; justify-content: space-between; } .service_item h3 { font-size: 20px; margin-bottom: 12px; color: #004b63; font-family: "Zen Kaku Gothic New", sans-serif; } .service_item p { font-size: 16px; line-height: 1.7; margin-bottom: 18px; color: #444; } /* ボタン */ .more_btn { display: inline-block; padding: 10px 20px; background: #00749a; color: #fff; font-size: 15px; text-decoration: none; border-radius: 8px; margin-top: auto; transition: 0.3s; } .more_btn:hover { opacity: 0.85; } /* スマホ */ @media screen and (max-width: 768px) { .service_list_section .inner { grid-template-columns: 1fr; /* スマホは1列 */ } .service_item h3 { font-size: 18px; } .service_item p { font-size: 15px; } } /* ---------------------------------------- サービス内容セクション（WP環境構築） ---------------------------------------- */ .service_wp_section { background: #fff; padding: 60px 20px; } .service_wp_inner { max-width: 1200px; margin: 0 auto; } /* 見出し */ .service_wp_section h2 { font-size: 28px; font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; text-align: center; margin-bottom: 45px; color: #333; letter-spacing: 0.05em; } /* ======================================== 3カラムのグリッド ======================================== */ .service_wp_grid { display: grid; grid-template-columns: repeat(3, 1fr); /* PC: 3列 */ gap: 30px; } /* ======================================== サービスアイテム（箱） ======================================== */ .service_wp_item { background: #fff8f2; /* 更新代行EXベース色 */ border: 1px solid #f9e0c3; /* 優しい枠線 */ border-radius: 12px; padding: 30px 25px; box-sizing: border-box; color: #444; } /* アイコン（任意） */ .service_wp_item .icon { text-align: center; margin-bottom: 15px; } .service_wp_item .icon img { width: 60px; height: auto; } /* タイトル */ .service_wp_item h3 { font-size: 20px; font-weight: 700; text-align: center; color: #ff8900; letter-spacing: 0.04em; margin-bottom: 12px; } /* テキスト */ .service_wp_item p { font-size: 15px; line-height: 1.8; color: #555; margin: 0; } /* ======================================== スマホ（1カラム） ======================================== */ @media (max-width: 767px) { .service_wp_grid { grid-template-columns: 1fr; /* スマホは1列 */ gap: 20px; } .service_wp_item { padding: 22px 18px; } .service_wp_section h2 { font-size: 22px; } .service_wp_item h3 { font-size: 18px; } .service_wp_item p { font-size: 14px; } } /* セクション全体 */ .service_detail_section { background: #fff; padding: 40px 0; } /* 内側調整 */ .service_detail_section .inner { max-width: 1200px; margin: 0 auto; } /* 見出し */ .service_detail_section h2 { font-size: 28px; margin-bottom: 40px; text-align: center; color: #333; } /* グリッド */ .service_detail_section .service_detail_wrap { display: grid !important; grid-template-columns: repeat(3, 1fr); /* ←強制的に3列 */ gap: 30px; } /* 各ボックス */ .service_detail_section .service_detail_box { background: #fff; border: 1px solid #e8e5df; padding: 25px; border-radius: 10px; box-sizing: border-box; } /* h3 */ .service_detail_section .service_detail_box h3 { font-size: 20px; margin-bottom: 15px; color: #333; } /* 説明文 */ .service_detail_section .service_detail_box p { font-size: 15px; line-height: 1.7; color: #555; margin: 0; } /* ==== スマホ ==== */ @media (max-width: 767px) { .service_detail_section .service_detail_wrap { grid-template-columns: 1fr; /* スマホでは1列 */ gap: 20px; } .service_detail_section .service_detail_box { padding: 20px; } } /* セクション全体 */ .service_detail_section { background: #f5fafc; /* ベンリヤ向け淡いブルー背景 */ padding: 40px 50px; padding-bottom:100px; } /* 内側調整 */ .service_detail_section .inner { max-width: 1200px; margin: 0 auto; } /* 見出し */ .service_detail_section h2 { font-size: 28px; margin-bottom: 40px; text-align: center; color: #00749a; /* ブランドカラー */ font-weight: 700; letter-spacing: 0.05em; } /* グリッド */ .service_detail_section .service_detail_wrap { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 30px; } /* --- 各ボックス --- */ .service_detail_section .service_detail_box { background: #ffffff; border: 2px solid #c8e6f0; /* 薄いブルー枠線 */ padding: 25px; border-radius: 10px; box-sizing: border-box; transition: background 0.3s, border-color 0.3s; } /* タイトル */ .service_detail_section .service_detail_box h3 { font-size: 20px; margin-bottom: 15px; color: #00749a; /* ブランドカラー */ font-weight: 700; line-height: 1.4; } /* 説明文 */ .service_detail_section .service_detail_box p { font-size: 15px; line-height: 1.7; color: #444; margin: 0; } /* ==== スマホ ==== */ @media (max-width: 767px) { .service_detail_section .service_detail_wrap { grid-template-columns: 1fr; gap: 20px; } .service_detail_section .service_detail_box { padding: 20px; } .service_detail_section h2 { font-size: 24px; } } /* WordPress環境構築の流れ（文章形式） */ .wp_flow_text_section { padding-top:60px; } .wp_flow_text_section h2 { text-align: center; font-size: 32px; color: #00749a; font-weight: 800; margin-bottom: 30px; } .wp_flow_text h3 { font-size: 20px; font-weight: 700; color: #004d67; margin-top: 30px; margin-bottom: 10px; } .wp_flow_text p { font-size: 15px; line-height: 1.9; color: #555; } /* 安心サポートボックス */ .wp_support_section { padding:30px 20px; } .wp_support_box { background: #e6f4f8; border: 1px solid #00749a; padding: 20px 25px; border-radius: 12px; box-sizing: border-box; } .wp_support_box h3 { font-size: 22px; font-weight: 700; color: #00749a; margin-bottom: 15px; text-align: center; } .wp_support_box p { font-size: 15px; color: #444; line-height: 1.9; } /* スマホ対応 */ @media screen and (max-width: 768px) { .wp_support_box { padding: 25px 20px; } .wp_support_box h3 { font-size: 18px; } } /* 環境構築をプロに任せるメリット */ .wp_merit_section { padding: 80px 20px; background: #fff; } .wp_merit_section h2 { text-align: center; font-size: 32px; color: #00749a; font-weight: 800; margin-bottom: 50px; } .wp_merit_wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .wp_merit_box { background: #f0faff; border-left: 5px solid #00749a; padding: 25px 20px; border-radius: 8px; } .wp_merit_box h3 { font-size: 20px; font-weight: 700; color: #004d67; margin-bottom: 10px; } .wp_merit_box p { font-size: 15px; line-height: 1.9; color: #444; } /* スマホ 1列 */ @media screen and (max-width: 768px) { .wp_merit_wrap { grid-template-columns: 1fr; gap: 20px; } } /* 初期トラブル一覧 */ .wp_trouble_section { padding: 80px 20px; background: #fff; } .wp_trouble_section h2 { text-align: center; font-size: 32px; color: #00749a; font-weight: 800; margin-bottom: 50px; } .wp_trouble_wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .wp_trouble_box { background: #f0faff; border: 1px solid #c9e8f0; border-radius: 10px; padding: 25px 20px; } .wp_trouble_box h3 { font-size: 18px; font-weight: 700; color: #004d67; margin-bottom: 10px; } .wp_trouble_box p { font-size: 15px; color: #444; line-height: 1.8; } /* スマホ */ @media screen and (max-width: 768px) { .wp_trouble_wrap { grid-template-columns: 1fr; gap: 20px; } } /* 有料テーマ注意書きセクション */ .theme_notice_section { padding: 60px 0; } .theme_notice_section .inner { max-width: 1200px; margin: 0 auto; } .theme_notice_section h2 { font-size: 28px; margin-bottom: 30px; text-align: center; font-weight: 700; color: #333; } .theme_notice_box { background: #fff; border: 1px solid #e0e0e0; padding: 30px; border-radius: 8px; } .theme_notice_box p { font-size: 16px; line-height: 1.8; margin-bottom: 20px; color: #444; } .theme_notice_list { margin: 0 0 25px 0; padding: 0 0 0 20px; } .theme_notice_list li { list-style: disc; margin-bottom: 8px; font-size: 15px; color: #555; } /* スマホ対応 */ @media (max-width: 768px) { .theme_notice_section { padding: 40px 0; } .theme_notice_box { padding: 20px; } .theme_notice_section h2 { font-size: 22px; } } .plugin_types_section { padding: 60px 0; background: #f2f2f2; } .plugin_list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-top: 30px; } .plugin_box { background: #fff; border: 1px solid #e1e1e1; border-radius: 10px; padding: 25px; box-shadow: 0 3px 10px rgba(0,0,0,0.04); } .plugin_box h3 { font-size: 18px; margin-bottom: 12px; color: #333; border-left: 5px solid #00749a; /* ベース色 */ padding-left: 10px; line-height: 1.4; } .plugin_rep { font-size: 14px; color: #555; margin-bottom: 15px; } .plugin_box ul { list-style: disc; margin-left: 20px; margin-bottom: 15px; } .plugin_box li { margin-bottom: 6px; font-size: 15px; color: #444; } .plugin_point { font-size: 14px; color: #00749a; /* アクセント */ font-weight: bold; margin-top: 8px; } /* プラグイントラブルセクション */ .plugin_trouble_section { padding: 60px 20px; } .plugin_trouble_section h2 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-size: 32px; font-weight: 800; color: #00749a; text-align: center; margin-bottom: 40px; } /* ラップ */ .plugin_trouble_wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; } @media screen and (max-width: 768px) { .plugin_trouble_wrap { grid-template-columns: 1fr; } } /* 各ボックス */ .plugin_trouble_box { background: #f7f8fa; border-left: 6px solid #00749a; border-radius: 8px; padding: 20px; } .plugin_trouble_box h3 { font-size: 18px; font-weight: 700; color: #005f80; margin-bottom: 10px; } .plugin_trouble_box p { font-size: 15px; color: #444; line-height: 1.8; } .plugin_merit_section { width: 100%; background: #f7f8fa; padding: 60px 0; } .plugin_merit_section .inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .plugin_merit_lead h2 { font-size: 28px; font-weight: 700; color: #00749a; margin-bottom: 20px; } .plugin_merit_lead .lead { font-size: 16px; color: #555; line-height: 1.8; margin-bottom: 40px; } .plugin_merit_list .plugin_merit_item { background: #fff; border-left: 4px solid #00749a; padding: 20px 25px; margin-bottom: 25px; border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,0.05); } .plugin_merit_item h3 { font-size: 20px; color: #00749a; margin-bottom: 10px; font-weight: 700; } .plugin_merit_item p { font-size: 15px; color: #444; line-height: 1.8; } /* ---------------------------------------------------- デザイン調整の導入セクション ---------------------------------------------------- */ .design_intro_detail { padding: 30px 0; } .design_intro_detail .inner { max-width: 1200px; margin: 0 auto; } .design_intro_detail h2 { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 25px; color: #333; letter-spacing: 0.05em; } .design_intro_detail .lead { font-size: 16px; line-height: 1.8; color: #444; max-width: px; margin: 0 auto; padding: 0 20px; } /* ============================ 1. レイアウト再構築（装飾） ============================ */ .layout_rebuild { background: #ffffff; padding: 70px 0; position: relative; } .layout_rebuild h2 { font-size: 28px; font-weight: 700; margin-bottom: 25px; padding-left: 16px; border-left: 6px solid #00749a; /* アクセントライン */ } .layout_rebuild .lead { font-size: 16px; line-height: 1.9; margin-bottom: 40px; color: #333; } .point_title { padding-left: 0; margin-top: 50px; margin-bottom: 15px; font-size: 18px; font-weight: 700; color:#00749a; } .card_grid_simple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .card_grid_simple .card_item { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; text-align: center; } .card_grid_simple .card_item img { width: 100%; height: auto; display: block; } .card_grid_simple .card_title { font-size: 18px; font-weight: 700; margin: 16px 12px 8px; color: #333; } .card_grid_simple .card_text { font-size: 14px; line-height: 1.6; margin: 0 12px 16px; color: #555; } @media screen and (max-width: 767px) { .card_grid_simple { grid-template-columns: 1fr; } } .card_grid_hover { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .card_grid_hover .card_item { background: #fff; border-radius: 8px; overflow: hidden; transition: transform .3s, box-shadow .3s; border: none; } .card_grid_hover .card_item:hover { transform: translateY(-6px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); } .card_grid_hover .card_item img { width: 100%; height: auto; display: block; } .card_grid_hover .card_title { font-size: 17px; font-weight: 600; margin: 14px 12px 6px; color: #00749a; } .card_grid_hover .card_text { font-size: 14px; line-height: 1.6; margin: 0 12px 12px; color: #444; } @media screen and (max-width: 1024px) { .card_grid_hover { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 767px) { .card_grid_hover { grid-template-columns: 1fr; } } /* 2カラム固定 */ .card_grid_overlap_vertical { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; margin: 200px 0; } /* カード本体 */ .card_grid_overlap_vertical .card_item { position: relative; background: #fff; border-radius: 16px; padding: 180px 24px 30px; /* 縦長画像向けの余白量 */ box-shadow: 0 6px 20px rgba(0,0,0,0.12); text-align: center; overflow: visible; } /* 縦長向け：画像の飛び出し */ .card_grid_overlap_vertical .thumb_wrap { position: absolute; top: -150px; /* 縦長画像でもしっかり飛び出す */ left: 50%; transform: translateX(-50%); } /* 縦長でも安定する縮小幅 */ .card_grid_overlap_vertical .thumb_wrap img { width: 260px; /* ← ココが最重要：縮小するから崩れない */ height: auto; border-radius: 12px; border: 4px solid #fff; box-shadow: 0 14px 26px rgba(0,0,0,0.25); } /* テキスト */ .card_grid_overlap_vertical .card_title { font-size: 20px; font-weight: 700; color: #00749a; margin-bottom: 10px; } .card_grid_overlap_vertical .card_text { font-size: 15px; color: #444; line-height: 1.7; } @media screen and (max-width: 767px) { .card_grid_overlap_vertical { grid-template-columns: 1fr; } .card_grid_overlap_vertical .thumb_wrap img { width: 200px; } } .point_list { padding-left: 8px; margin-bottom: 30px; list-style: none; /* ← これを追加 */ } .point_list li { margin-bottom: 10px; line-height: 1.7; position: relative; padding-left: 12px; list-style: none; /* 念のためこちらにも */ } .point_list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: #00749a; border-radius: 50%; } /* Before / After 画像 */ .before_after { margin-top: 40px; text-align: center; } .before_after img { width: 100%; max-width: 950px; border-radius: 10px; border: 4px solid #00749a22; /* 薄い枠で上品に */ box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); } .before_after .caption { font-size: 14px; color: #444; margin-top: 12px; line-height: 1.6; } .js_sample_box { margin-top: 30px; padding: 20px; background: #f8f8f8; border-radius: 10px; } .js_title { font-size: 18px; margin: 25px 0 10px; color: #00749a; border-left: 4px solid #00749a; padding-left: 10px; } pre.code { background: #222; color: #eee; padding: 16px; font-size: 14px; border-radius: 8px; overflow-x: auto; line-height: 1.6; } /* ----------------------------------- デモ共通スタイル ----------------------------------- */ .js_section .js_demo_item { margin-bottom: 60px; padding: 25px; background: #fff; border: 1px solid #e5ebf0; border-radius: 10px; } .js_section .demo_title { font-size: 20px; margin-bottom: 20px; color: #00749a; font-weight: 600; } .js_demo_area { padding: 20px; background: #f7fbfd; border-radius: 8px; border: 1px solid #dde8ef; } /* ----------------------------------- ① アコーディオン ----------------------------------- */ .acc_item { border: 1px solid #ccd7df; border-radius: 8px; overflow: hidden; } .acc_title { padding: 15px; font-size: 16px; background: #00749a; color: #fff; cursor: pointer; font-weight: 600; } .acc_content { padding: 15px; background: #fff; display: none; line-height: 1.6; } /* ----------------------------------- ② フェードイン ----------------------------------- */ .fade_box { opacity: 0; transform: translateY(20px); transition: 0.6s ease; background: #ffffff; padding: 20px; border-radius: 8px; text-align: center; border: 1px solid #ccd7df; } .fade_box.show { opacity: 1; transform: translateY(0); } /* ----------------------------------- ③ ヘッダー縮小デモ ----------------------------------- */ .mini_header_demo { width: 100%; background: #00749a; color: #fff; padding: 20px; text-align: center; font-weight: bold; transition: all 0.3s ease; } .mini_header_demo.small { padding: 8px; background: #005f7d; } /* ----------------------------------- ④ トップへ戻る ----------------------------------- */ .long_demo_area { position: relative; height: 350px; background: #eef6fa; border-radius: 10px; } .demo_totop_btn { position: absolute; right: 20px; bottom: 20px; width: 50px; height: 50px; background: #00749a; border: none; border-radius: 50%; color: #fff; font-size: 20px; cursor: pointer; opacity: 0; transition: 0.4s ease; } .demo_totop_btn.show { opacity: 1; } /* ----------------------------------- ⑤ ホバーで光るボタン ----------------------------------- */ .shine_demo_btn { display: inline-block; padding: 14px 35px; background: #00749a; color: #fff; border-radius: 6px; font-weight: 600; position: relative; overflow: hidden; } .shine_demo_btn::after { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: rgba(255,255,255,0.4); transform: skewX(-25deg); transition: 0.4s; } .shine_demo_btn:hover::after { left: 150%; } /* ----------------------------------- ⑥ タイピングアニメ ----------------------------------- */ .typing_demo { font-size: 18px; font-weight: 500; line-height: 1.7; color: #333; min-height: 40px; border-left: 3px solid #00749a; padding-left: 10px; white-space: nowrap; overflow: hidden; } /* ------------------------------ デモ共通 ------------------------------ */ .js_demo_item { margin-bottom: 50px; padding: 25px; background: #fff; border: 1px solid #e5ebf0; border-radius: 10px; } .js_demo_area { margin-top: 15px; padding: 20px; background: #f4fafc; border-radius: 8px; border: 1px solid #dde8ef; } .demo_title { font-size: 20px; color: #00749a; font-weight: 600; } /* ------------------------------ デモ共通 ------------------------------ */ .js_demo_item { margin-bottom: 50px; padding: 25px; background: #fff; border: 1px solid #e5ebf0; border-radius: 10px; } .js_demo_area { margin-top: 15px; padding: 20px; background: #f4fafc; border-radius: 8px; border: 1px solid #dde8ef; } .demo_title { font-size: 20px; color: #00749a; font-weight: 600; } /* ------------------------------ ① ふわっとアコーディオン ------------------------------ */ .acc_item { border-radius: 8px; overflow: hidden; border: 1px solid #ccd7df; } /* タイトル */ .acc_title { background: #00749a; color: #fff; padding: 15px; cursor: pointer; font-weight: 600; } /* 初期状態：閉じる */ .acc_content { max-height: 0 !important; overflow: hidden; padding: 0 15px; background: #fff; transition: max-height 0.4s ease, padding 0.3s ease; } /* 開く状態 */ .acc_content.open { padding: 15px; } /* ------------------------------ ② ホバー浮き上がりカード ------------------------------ */ .hover_card { padding: 20px; background: #fff; border-radius: 10px; border:1px solid #ccd7df; text-align: center; transition: 0.3s; } .hover_card:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); } /* ------------------------------ ③ 色切り替えボックス ------------------------------ */ .change_color_btn { padding: 10px 25px; background: #00749a; color: #fff; border: none; border-radius: 6px; cursor: pointer; margin-bottom: 15px; } .color_box { width: 100%; height: 80px; background: #ddd; border-radius: 8px; transition: background 0.3s; } .acc_content { max-height: 0 !important; overflow: hidden; background: #fff; padding: 0 15px; transition: max-height 0.45s ease, padding 0.3s ease; border-top: 1px solid #ccd7df; } .acc_content.open { padding: 15px; } /* ------------------------------ ④ 画像ポップアップ ------------------------------ */ .popup_overlay { display:none; position: fixed; inset:0; background: rgba(0,0,0,0.55); justify-content:center; align-items:center; z-index:9999; } .popup_content { background:#fff; padding:20px; border-radius:10px; text-align:center; width:90%; max-width:500px; } .popup_image { width:100%; height:auto; border-radius:8px; margin-bottom:15px; } .popup_open_btn, .popup_close_btn { padding:10px 20px; background:#00749a; color:#fff; border:none; border-radius:6px; cursor:pointer; } .hover_zoom_demo { padding: 10px 0; } .hover_zoom_box { overflow: hidden; border-radius: 10px; max-width: 350px; } .hover_zoom_box img { width: 100%; height: auto; transition: transform 0.6s ease; } .hover_zoom_box:hover img { transform: scale(1.15); } /* summary section */ .wp_summary_section { padding: 60px 0; background: #fafafa; } .wp_summary_section .inner { max-width: 1200px; margin: 0 auto; } .wp_summary_section h2 { font-size: 28px; font-weight: 700; margin-bottom: 25px; line-height: 1.4; color: #00749a; } .wp_summary_section .summary_lead { font-size: 17px; margin-bottom: 25px; line-height: 1.8; color: #444; } .wp_summary_section p { font-size: 16px; line-height: 1.9; color: #555; margin-bottom: 22px; } @media screen and (max-width: 768px) { .wp_summary_section { padding: 40px 0; } .wp_summary_section h2 { font-size: 22px; margin-bottom: 20px; } .wp_summary_section .summary_lead { font-size: 16px; margin-bottom: 20px; } .wp_summary_section p { font-size: 15px; margin-bottom: 18px; } } /* caution section */ .wp_caution_section .inner { max-width: 1200px; margin: 0 auto; } .wp_caution_box { background: #fff; border: 1px solid #e2e2e2; padding: 20px 25px; border-radius: 6px; } .wp_caution_box h3 { font-size: 22px; font-weight: 700; margin-bottom: 18px; color: #333; line-height: 1.4; } .wp_caution_box p { font-size: 15.5px; line-height: 1.9; color: #555; margin-bottom: 18px; } .wp_caution_box p:last-child { margin-bottom: 0; } @media screen and (max-width: 768px) { .wp_caution_section { padding: 40px 0; } .wp_caution_box { padding: 22px 20px; } .wp_caution_box h3 { font-size: 19px; margin-bottom: 15px; } .wp_caution_box p { font-size: 15px; margin-bottom: 15px; } } /* トラブル詳細ボックス（枠線なし） */ .trouble_detail_box { margin-bottom: 20px; } /* 見出し */ .trouble_detail_box h3 { font-size: 22px; font-weight: 700; color: #00749a; margin-bottom: 15px; line-height: 1.5; } .trouble_detail_box h4 { font-size: 18px; font-weight: 700; margin: 28px 0 12px; color: #005a7a; } /* 本文 */ .trouble_detail_box p { font-size: 15px; line-height: 1.9; margin-bottom: 15px; color: #333; } /* 箇条書き共通 */ .trouble_detail_box ul { margin: 0 0 20px; padding-left: 20px; } .trouble_detail_box ul li { font-size: 15px; line-height: 1.8; margin-bottom: 6px; color: #333; } /* "やってはいけない" の強調（赤系） */ .trouble_ng li { color: #c62828; font-weight: 600; } /* "当社で行う復旧内容" の強調（青系） */ .trouble_fix li { color: #005b83; font-weight: 600; } /* 再発防止の強調（グリーン系） */ .trouble_prevent li { color: #2e7d32; font-weight: 600; } .trouble_title { font-size: 24px; font-weight: 700; color: #00749a; margin-bottom: 20px; padding: 14px 18px; background: #f4f8fa; border-left: 6px solid #00749a; border-radius: 6px; display: flex; align-items: center; gap: 10px; } .trouble_title .icon { background: #00749a; color: #fff; font-size: 16px; font-weight: 700; line-height: 1; padding: 6px 10px; border-radius: 4px; display: inline-block; } /* スマホ調整 */ @media (max-width: 767px) { .trouble_detail_box { padding: 20px; } .trouble_detail_box h3 { font-size: 20px; } .trouble_detail_box h4 { font-size: 17px; } .trouble_detail_box p, .trouble_detail_box ul li { font-size: 14px; } } /* WordPressトラブル安心メッセージ */ .wp_rescue_message { } .wp_rescue_message h2 { font-size: 26px; margin-bottom: 20px; color: #00749a; font-weight: 700; } .wp_rescue_message .lead { font-size: 17px; line-height: 1.8; margin-bottom: 20px; } .wp_rescue_message .highlight { background: #00749a; color: #fff; padding: 20px; border-radius: 6px; font-size: 18px; line-height: 1.8; margin-bottom: 25px; } .wp_rescue_message p { font-size: 16px; line-height: 1.8; } .wp_rescue_message .cta_btn { margin-top: 25px; text-align: center; } .wp_rescue_message .cta_btn a { display: inline-block; background: #00749a; color: #fff; padding: 14px 26px; border-radius: 4px; font-size: 17px; text-decoration: none; font-weight: 600; } .wp_rescue_message .cta_btn a:hover { opacity: 0.85; } /* ======================================= WordPress修理・復旧をプロに任せるメリット ======================================= */ .service_detail_section { background: #f2f7f9; padding: 70px 20px; } .service_detail_section .inner { max-width: 1200px; margin: 0 auto; } .service_detail_section h2 { font-size: 30px; text-align: center; color: #003946; margin-bottom: 50px; letter-spacing: 0.06em; } /* ---- 各メリットボックス ---- */ .service_detail_box { position: relative; background: #ffffff; border-radius: 14px; padding: 30px 25px 30px 80px; margin-bottom: 30px; border-left: 6px solid #00749a; box-shadow: 0 4px 15px rgba(0,0,0,0.06); transition: 0.3s ease; } .service_detail_box:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.10); transform: translateY(-2px); } /* ---- 番号 ---- */ .service_detail_box .num { position: absolute; left: 25px; top: 25px; font-size: 32px; font-weight: 700; color: #00749a; opacity: 0.9; line-height: 1; } /* ---- タイトル ---- */ .service_detail_box h3 { font-size: 20px; font-weight: 700; color: #003946; margin-bottom: 12px; letter-spacing: 0.03em; } /* ---- 本文 ---- */ .service_detail_box p { font-size: 15px; color: #444; line-height: 1.9; margin: 0; } /* ---- スマホ ---- */ @media screen and (max-width: 767px) { .service_detail_section { padding: 50px 15px; } .service_detail_box { padding: 25px 20px 25px 60px; } .service_detail_box .num { left: 18px; top: 22px; font-size: 28px; } .service_detail_box h3 { font-size: 18px; } } /* ━━━━━━━━━━━━━━━━━━━ SECURITY WARNING SECTION ━━━━━━━━━━━━━━━━━━━ */ .security_warning_section { background: #f5fbfd; border-left: 6px solid #00749a; padding: 50px 40px; margin: 50px auto 30px; /* 下の余白 30px */ border-radius: 10px; max-width: 1200px; box-shadow: 0 4px 14px rgba(0,0,0,0.05); } /* タイトル */ .security_warning_section h2 { font-size: 30px; font-weight: 700; color: #004f68; margin-bottom: 25px; letter-spacing: 0.03em; line-height: 1.4; text-align: left; } /* 本文 */ .security_warning_section p { font-size: 18px; line-height: 1.9; color: #333; margin-bottom: 20px; } .security_warning_section strong { color: #00749a; font-weight: 700; } /* リスト */ .security_warning_section ul { margin: 20px 0 10px 20px; padding: 0; } .security_warning_section ul li { list-style: square; margin-bottom: 8px; font-size: 17px; color: #444; } /* アラートポイント */ .security_warning_section .alert_point { background: #e6f4f8; border-left: 4px solid #00749a; padding: 15px 20px; border-radius: 6px; margin-top: 25px; font-size: 17px; line-height: 1.8; color: #333; } /* モバイル */ @media (max-width: 768px) { .security_warning_section { padding: 30px 20px; margin: 40px auto 30px; } .security_warning_section h2 { font-size: 24px; } .security_flow_section { max-width: 1200px; margin: 0 auto 80px; padding: 40px 20px; background: #ffffff; } .security_flow_section .inner h2 { font-size: 28px; margin-bottom: 40px; color: #333; font-weight: 700; text-align: center; } .flow_step { margin-bottom: 45px; } .flow_step h3 { font-size: 22px; margin-bottom: 12px; color: #004c70; /* ベンリヤの青寄りの色味 */ font-weight: 700; } .flow_step p { font-size: 16px; color: #444; line-height: 1.8; margin: 0; } .security_warning_section p { font-size: 16px; } } /* ━━━━━━━━━━━━━━━━━━━ SECURITY PREVENT SECTION ━━━━━━━━━━━━━━━━━━━ */ .security_prevent_section { padding: 20px 20px 60px; /* ← 上40〜70 → 20に変更（間を30pxにするため） */ background: #ffffff; max-width: 1200px; margin: 0 auto 20px; } .security_prevent_section h2 { font-size: 30px; font-weight: 700; color: #004f68; margin-bottom: 30px; line-height: 1.5; } .security_prevent_section .lead_text { font-size: 18px; color: #333; line-height: 1.9; margin-bottom: 40px; } .security_prevent_section strong { color: #00749a; font-weight: 700; } .prevent_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px 40px; } .prevent_item { background: #f5fbfd; border-left: 5px solid #00749a; padding: 25px 25px 20px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.05); } .prevent_item h3 { font-size: 20px; font-weight: 700; color: #004f68; margin-bottom: 10px; } .prevent_item p { font-size: 16px; color: #444; line-height: 1.8; } /* モバイル */ @media (max-width: 768px) { .prevent_list { grid-template-columns: 1fr; } .security_prevent_section h2 { font-size: 24px; } .security_prevent_section .lead_text { font-size: 16px; } .prevent_item h3 { font-size: 18px; } .prevent_item p { font-size: 15px; } } /* ---------------------------------- SEOページ 全体 ---------------------------------- */ .seo_section { padding: 80px 0; background: #fff; color: #333; font-family: "Noto Sans JP", sans-serif; } .seo_section .inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* ---------------------------------- タイトル・リード ---------------------------------- */ .seo_section .section_title { font-size: 32px; font-weight: 700; color: #00749a; margin-bottom: 20px; text-align: left; } .seo_section .lead { font-size: 18px; line-height: 1.8; margin-bottom: 50px; color: #444; } /* ---------------------------------- 「こんな方に向いています」 ---------------------------------- */ .seo_target { background: #f3f9fb; border-left: 6px solid #00749a; padding: 25px 30px; margin-bottom: 60px; border-radius: 6px; } .seo_target h3 { font-size: 22px; margin-bottom: 15px; color: #00749a; } .seo_target ul { padding-left: 0; list-style: none; } .seo_target ul li { position: relative; padding-left: 20px; margin-bottom: 10px; line-height: 1.7; font-size: 16px; } .seo_target ul li::before { content: "■"; color: #00749a; font-size: 10px; position: absolute; left: 0; top: 5px; } /* ---------------------------------- 作業内容リスト ---------------------------------- */ .seo_contents { margin-bottom: 70px; } .seo_contents h3 { font-size: 26px; margin-bottom: 25px; border-left: 6px solid #00749a; padding-left: 12px; color: #00749a; } .seo_item { margin-bottom: 40px; padding: 25px 30px; border: 1px solid #e2e2e2; border-radius: 6px; background: #fafafa; } .seo_item h4 { font-size: 20px; margin-bottom: 10px; color: #00749a; font-weight: 700; } .seo_item p { font-size: 16px; line-height: 1.8; color: #444; } /* ---------------------------------- 注意事項 ---------------------------------- */ .seo_notice { margin-bottom: 70px; padding: 25px 30px; background: #f5f5f5; border-radius: 6px; border-left: 6px solid #00749a; } .seo_notice h3 { font-size: 22px; margin-bottom: 12px; color: #00749a; } .seo_notice p { font-size: 16px; line-height: 1.8; } /* ---------------------------------- CTA ---------------------------------- */ .seo_contact { text-align: center; padding: 40px 20px; background: #00749a; border-radius: 6px; color: #fff; } .seo_contact h3 { font-size: 26px; margin-bottom: 10px; font-weight: 700; } .seo_contact p { font-size: 17px; margin-bottom: 25px; line-height: 1.6; } .seo_btn a { display: inline-block; padding: 14px 32px; background: #fff; color: #00749a; font-size: 18px; font-weight: 700; text-decoration: none; border-radius: 6px; border: 2px solid #fff; transition: 0.3s; } .seo_btn a:hover { background: #e5f3f8; border-color: #e5f3f8; } /* ---------------------------------- スマホ対応 ---------------------------------- */ @media screen and (max-width: 768px) { .seo_section { padding: 50px 0; } .seo_section .section_title { font-size: 26px; } .seo_target, .seo_item, .seo_notice { padding: 20px 18px; } .seo_item h4 { font-size: 18px; } .seo_contact { padding: 30px 20px; } .seo_contact h3 { font-size: 22px; } }