Theme Name: WING-AFFINGER5 Child
Template: affinger5
Description: ver20180831以上対応
Version: 20180831
*/
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
/*テキストデザイン */
body,
p {
font-size: 14px;
letter-spacing: 0.05em;
line-height: 2.5em;
color: #444444;
font-style: normal;
}
/* タイポスフォントにする */
.typos{
font-family: kan48typos-std, sans-serif;
font-weight: 400;
font-style: normal;
}
/* 見出し１デザイン */
h1{
font-family: 'heisei-maru-gothic-std', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 17px;
letter-spacing: 0.15em;
color: #595454;
}
h1.entry-title:first-letter, .single h1.entry-title:first-letter {
color:inherit;
}
/* マーカーデザイン */
.catch{
background: linear-gradient(transparent 60%, #fcf3f1 0%);
color: #fe8cb0;
letter-spacing: 0.08em;
}
/* マーカー下線デザイン */
.underline{
background: linear-gradient(transparent 60%, #fcf3f1 0%);
color:#fe8cb0;
font-family: kan48typos-std, sans-serif;
}
#footer .footerlogo img {
max-width: 150px;
}
/*Contact Form 7カスタマイズ*/
/*スマホContact Form 7カスタマイズ*/
@media(max-width:500px){
.inquiry th ,.inquiry td {
display:block!important;
width:100%!important;
border-top:none!important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box!important;
}
.inquiry tr:first-child th{
border-top:1px solid #d7d7d7!important;
}
/* 必須・任意のサイズ調整 */
.inquiry .haveto,.inquiry .any {
font-size:10px;
}}
/*見出し欄*/
.inquiry th{
text-align:left;
font-size:14px;
color:#444;
padding-right:5px;
width:30%;
background:#fff;
border:solid 1px #d7d7d7;
vertical-align: top;
}
/*通常欄*/
.inquiry td{
font-size:13px;
border:solid 1px #d7d7d7;
}
/*横の行とテーブル全体*/
.inquiry tr, table{
border:solid 1px #d7d7d7!important;
}
/*必須の調整*/
.haveto{
font-size:7px;
padding:5px;
background:#ff9393;
color:#fff;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
}
/*任意の調整*/
.any{
font-size:7px;
padding:5px;
background:#93c9ff;
color:#fff;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
display:block;
}
/*送信ボタンのデザイン変更*/
.btnwidth{
position:relative;
width:100%;
height: 100px;
margin-bottom: 30px;
}
#formbtn{
padding:10px;
max-width:350px;
background:#ff9393;
color:#fff;
font-size:18px;
font-weight:bold;
border-radius:2px;
position:absolute;
top:50%;
left:50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
background:#ffa6b3;
color:#444444;
border:2px solid #FFF4F4;
}
.wpcf7 input[type=checkbox], .wpcf7 input[type=radio]{
max-width: 5%;
}
.wpcf7 select{
width:80%;
}
.wpcf7 {
background: #FFF4F4;
border: 1px solid #fff;
}
/* 表デザイン */
tr {
border: solid 1px #fbd5d5;
}
th {
display: table-cell;
vertical-align: inherit;
}
.wpcf7 .wpcf7-submit {
background-color: #c1a559;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.1em;
}
table tr td {
border-bottom-color: #fbd5d5;
border-left-color: #fbd5d5;
vertical-align: top;
}
/* グラデーションボタン */
.btn-grad {background-image: linear-gradient(to right, #ddd6f3 0%, #faaca8 51%, #ddd6f3 100%)}
.btn-grad:hover { background-position: right center; color: #FFF5F4;/*文字の色*/}
.btn-grad {
padding: 15px;
width: 220px;
text-decoration-line: none;
text-align: center;/*文字の位置*/
transition: 0.5s;
background-size: 200% auto;
color: white;/*文字の色*/
box-shadow: 0 0 20px #eee;
border-radius: 0px;/*ボタンの角の形*/
display: block;
}
/*グラデーションボタンセンター寄せデザイン */
.btn-grad-center {background-image: linear-gradient(to right, #ddd6f3 0%, #faaca8 51%, #ddd6f3 100%)}
.btn-grad-center:hover { background-position: right center; color: #FFF5F4;/*文字の色*/}
.btn-grad-center {
padding: 15px;
width:80%;
margin:0 auto;
text-decoration-line: none;
text-align: center;/*文字の位置*/
transition: 0.5s;
background-size: 200% auto;
color: white;/*文字の色*/
box-shadow: 0 0 20px #eee;
border-radius: 0px;/*ボタンの角の形*/
display: block;
}
/*トップページのコンテンツ*/
.topContent {
padding: 10%;
background: url(https://preshine.co.jp/blog/wp-content/uploads/2020/04/Service.png);
background-repeat: no-repeat;
background-size: 100%;
}
.topContent p{
text-align:center;
font-size: 2.2em;
font-family: kan48typos-std, sans-serif;
letter-spacing: 0.1em;
}
/*トップページのピンク背景(薄)*/
.back{
background-color:#fffcfd;
padding:10%;
}
/*トップページのピンク背景(濃)*/
.back2{
background-color: #FFE6E9;
padding: 10% 0;
}
p.copyr {
display: none;
}
.centerBtn{
display: block;
width:25%;
margin: 0 auto;
}
.arconix-faq-title {
color:#ffafb7;
}
.su-image-carousel-item-content img {
border: 0px solid white !important;
border-radius: 0px !important;
box-shadow: none !important;
}
/*トップページのお問い合わせボタン*/
.shadowBtn{
padding: 30px;
margin: 2em;
max-width: 400px;
background: #FFF;
border-radius: 3px;
box-shadow: 0 0px 20px rgba(0,0,0,0.2);
border: 1px solid #d7b878;
font-family: kan48typos-std, sans-serif;
font-weight: bold;
color: #f76f9e;
letter-spacing: 0.1em;
}
a {
text-decoration: none;
}
.maru {
border-radius: 5px;
background-color: #ffcfcf;
padding: 4%;
font-size: 0.8em;
font-weight: bold;
color: #ffffff;
}
/* 鼠マーカーをピンクに変更 */
.gmarker-s {
background: linear-gradient(transparent 40%,#ffeded 0%);
}
/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 959px) {
.pc{
display:none;
}
.centerBtn{
display: block;
width:45%;
margin: 0 auto;
}
#footer{
margin-top: -50px;
}
}
/*-- ここまで --*/
/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {
.sitename-bottom{
width:30%;
}
.pc{
display:none;
}
/*-- ここまで --*/
}
/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) {
/*-- ここまで --*/
}
/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {
.sitename {
width: 50%;
}
#st-header{
padding: 10%;
}
.sp{
display:none;
}
#nopc{
display:none;
}
#footer{
margin: 0;
max-width: 100%;
margin-top: -50px;
}
.st-originalbtn {
width:220px;
margin-top:20px;
font-family: kan48typos-std, sans-serif;
}
#header-r{
margin-left: 400px;
margin-top: -15px;
}
/*-- ここまで --*/
}
/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {
#st-header{
margin-top: -20px;
margin-bottom: -20px;
}
#st-mobile-logo{
background-color: #fae9e5;
text-align: left;
display: block;
}
#footer-ad{
background-color:#fffbfb;
padding-top: 15px;
height:68px;
}
.shadowBtn{
width:250px;
padding: 20px;
}
.st-middle-menu{
margin-top:-10px;
}
/*-- ここまで --*/
}
アメブロカスタマイズ
ランディングページ（2ページ）
WordPressブログサイト
