* {
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
list-style: none;
}
.cf:before, .cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
.cf {
zoom: 1;
overflow: hidden;
}
html {
height: 100%;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
color: #f0f0f0;
background-color: #454545;
font-size: 12px;
font-family: 'Yu Mincho','游明朝','Hiragino Mincho Pro','ヒラギノ明朝 Pro W3',serif;
height: 100%;
width: 100%;
letter-spacing: -0.001em;
-webkit-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
} .nobreak {
display: inline-block;
}
.indent1em {
text-indent: -1em;
padding: 0 0 0 1em;
}
.divider {
margin-bottom: 2rem;
}
p.no-item {
display: block;
width: 100%;
font-size: 12px;
line-height: 1.5em;
font-weight: normal;
text-align: center;
color: #ccc;
margin: 0 !important;
padding: 5rem 0 5rem 0;
float: none;
}
p.no-item-inverse {
color: #fff;
}
.go-archive {
padding: 30px 0 0 0;
text-align: center;
}
.img-container {
position: relative;
margin: 0;
}
.img-container::before {
padding-top: 66.66%;
display: block;
content: "";
}
.img-container-square::before {
padding-top: 100%;
display: block;
content: "";
}
.img-container .container-inner {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.img-container .container-inner img {
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;';
}
.map-container {
width: 100%;
height: 300px;
display: block;
position: relative;
}
@media screen and (min-width: 481px) {
.map-container {
height: 400px;
}
}
@media screen and (min-width: 769px) {
.map-container {
height: 500px;
}
}
.map-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
a.deactivated {
text-decoration: none;
pointer-events: none;
cursor: default;
}
@media screen and (min-width: 769px) {
a[href^="tel:"] {
text-decoration: none;
pointer-events: none;
cursor: default;
}
}
img {
max-width: 100%;
height: auto;
}
iframe#vcs {
position: absolute;
}
#topcontrol {
bottom: 65px !important;
right: 5px;
z-index: 30001;
}
@media screen and (min-width: 769px) {
#topcontrol {
bottom: 5px !important;
right: 5px;
}
}
#topscroll {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 30px;
height: 30px;
background: #444;
filter: alpha(opacity=60);
-moz-opacity: 0.60;
opacity: 0.60;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (min-width: 769px) {
#topscroll {
width: 50px;
height: 50px;
}
}
#topscroll:hover {
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
#topscroll .fa {
color: #fff;
font-size: 30px;
line-height: 1em;
padding-bottom: 3px;
}
@media screen and (min-width: 769px) {
#topscroll .fa {
font-size: 50px;
padding-bottom: 5px;
}
}
a {
color: #f6f6f6;
text-decoration: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
a:hover {
color: #fff;
text-decoration: underline;
}
.mt40 {
margin-top: 40px !important;
} header {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
background-color: #000;
}
.hd-wrap {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
max-width: 1400px;
}
@media screen and (min-width: 769px) {
.hd-wrap {
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
}
}
.head-logo {
display: block;
width: 100%;
height: 30px;
margin: 15px 0;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
background-image: url(//www.cloud-fukuoka.jp/wordpress/wp-content/themes/cloud-fukuoka/img/logo.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
@media screen and (min-width: 769px) {
.head-logo {
width: 200px;
height: 40px;
margin: 25px 30px;
}
}
.head-logo a {
display: block;
width: 100%;
height: 30px;
}
@media screen and (min-width: 769px) {
.head-logo a {
height: 40px;
}
}
header p.btn-menu {
display: block;
width: 100%;
height: auto;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
@media screen and (min-width: 1050px) {
header p.btn-menu {
display: none;
}
}
header p.btn-menu a {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: 40px;
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
background-color: #1e1e1e;
}
@media screen and (min-width: 1050px) {
header p.btn-menu a {
display: none;
}
}
.menubody {
width: 100%;
height: auto;
}
@media screen and (min-width: 1050px) {
.menubody {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-end;
justify-content: flex-end;
-webkit-align-items: center;
align-items: center;
width: 750px;
margin: 20px;
}
}
nav[role="navigation"] {
clear: both;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.js nav[role="navigation"] {
overflow: hidden;
max-height: 0;
}
@media screen and (min-width: 1050px) {
.js nav[role="navigation"] {
max-height: none;
width: 100%;
max-width: 600px;
height: auto;
overflow: hidden;
}
}
nav[role="navigation"].active {
max-height: 600px;
}
nav[role="navigation"] ul {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
height: auto;
}
nav[role="navigation"] li {
display: block;
width: 100%;
height: auto;
border-bottom: 1px solid #666;
list-style-image: none;
list-style-type: none;
}
@media screen and (min-width: 481px) {
nav[role="navigation"] li {
width: 25%;
border-left: 1px solid #666;
}
nav[role="navigation"] li:first-of-type {
border-left: none;
}
}
@media screen and (min-width: 769px) {
nav[role="navigation"] li {
border: none;
}
}
nav[role="navigation"] li a {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: 40px;
font-size: 14px;
font-weight: bold;
color: #999;
background-color: #333;
text-decoration: none;
}
@media screen and (min-width: 769px) {
nav[role="navigation"] li a {
height: 50px;
font-size: 16px;
font-weight: bold;
color: #999;
background-color: transparent;
}
}
nav[role="navigation"] li a:hover {
color: #fff;
background-color: #333;
}
@media screen and (min-width: 769px) {
nav[role="navigation"] li a:hover {
background-color: #333;
}
}
footer {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
}
.ft-wrap {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
max-width: 1400px;
padding: 50px 0 70px;
}
@media screen and (min-width: 769px) {
.ft-wrap {
padding: 50px 20px 20px;
}
}
.ft-info {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
padding: 0 10px;
}
@media screen and (min-width: 769px) {
.ft-info {
padding: 0;
}
}
.ft-info p {
width: 100%;
font-size: 12px;
line-height: 1.8em;
font-weight: bold;
text-align: center;
color: #fff;
margin: 0;
}
@media screen and (min-width: 481px) {
.ft-info p {
font-size: 16px;
}
}
.ft-info p.ft-logo {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
padding-top: 80px;
background-image: url(//www.cloud-fukuoka.jp/wordpress/wp-content/themes/cloud-fukuoka/img/logo.png);
background-repeat: no-repeat;
background-position: center 10px;
background-size: 160px auto;
}
.ft-info p a {
color: #fff;
text-decoration: none;
}
.ft-info p a:hover {
color: #fff;
text-decoration: underline;
}
.ft-sns {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
padding: 20px;
}
@media screen and (min-width: 481px) {
.ft-sns {
padding: 40px;
}
}
.ft-sns a {
display: block;
width: 50px;
height: 50px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 0;
margin: 10px;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
color: #454545;
background-color: #b2b2b2;
text-decoration: none;
position: relative;
}
@font-face {
font-family: 'vcs-icons';
src:  url(//www.cloud-fukuoka.jp/wordpress/wp-content/themes/cloud-fukuoka/fonts/vcs-icons.eot?rq0mnn);
src:  url(//www.cloud-fukuoka.jp/wordpress/wp-content/themes/cloud-fukuoka/fonts/vcs-icons.eot?rq0mnn#iefix) format('embedded-opentype'),
url(//www.cloud-fukuoka.jp/wordpress/wp-content/themes/cloud-fukuoka/fonts/vcs-icons.ttf?rq0mnn) format('truetype'),
url(//www.cloud-fukuoka.jp/wordpress/wp-content/themes/cloud-fukuoka/fonts/vcs-icons.woff?rq0mnn) format('woff'),
url(//www.cloud-fukuoka.jp/wordpress/wp-content/themes/cloud-fukuoka/fonts/vcs-icons.svg?rq0mnn#vcs-icons) format('svg');
font-weight: normal;
font-style: normal;
}
[class^="ic-"], [class*=" ic-"] { font-family: 'vcs-icons' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1.25; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ft-sns a.ic-line:after {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 50px;
height: 50px;
content: "\e900";
font-size: 2.4em;
line-height: 1.85em;
text-indent: 0;
position: absolute;
top: 0;
left: 0;
}
.ft-sns a.ic-fb:after {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 50px;
height: 50px;
content: "\f09a";
font-size: 2.4em;
line-height: 1.85em;
text-indent: 0;
position: absolute;
top: 0;
left: 0;
}
.ft-sns a:hover {
color: #454545;
background-color: #fff;
text-decoration: none;
}
.ft-link {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
}
.ft-link ul {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
border-top: 1px solid #b2b2b2;
}
@media screen and (min-width: 769px) {
.ft-link ul {
-webkit-justify-content: center;
justify-content: center;
width: auto;
border: none;
}
}
.ft-link ul li {
display: block;
width: 50%;
height: auto;
border-bottom: 1px solid #b2b2b2;
}
@media screen and (min-width: 769px) {
.ft-link ul li {
display: inline-block;
width: auto;
padding: 0 10px;
border: none;
}
}
.ft-link ul li:nth-of-type(odd) {
border-right: 1px solid #b2b2b2;
}
@media screen and (min-width: 769px) {
.ft-link ul li:nth-of-type(odd) {
border-right: none;
}
}
.ft-link ul li a {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: 40px;
font-size: 14px;
line-height: 1.5em;
font-weight: normal;
color: #b2b2b2;
background-color: transparent;
text-decoration: none;
}
@media screen and (min-width: 769px) {
.ft-link ul li a {
display: inline;
font-size: 14px;
line-height: 1.5em;
font-weight: normal;
color: #b2b2b2;
background-color: transparent;
text-decoration: none;
}
}
.ft-link ul li a:hover {
color: #fff;
background-color: rgba(255,255,255,0.3);
text-decoration: none;
}
@media screen and (min-width: 769px) {
.ft-link ul li a:hover {
color: #fff;
background-color: transparent;
text-decoration: underline;
}
}
.ft-copy {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
padding: 20px 0 0 0;
}
.ft-copy p {
font-size: 12px;
line-height: 1.5em;
font-weight: normal;
color: #b2b2b2;
}
#inq-display {
display: block;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
@media (min-width: 769px) {
#inq-display {
display: none;
}
}
.inq-bottom {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0 auto;
width: 100%;
background: rgba(0,0,0,0.9);
background: -moz-linear-gradient(top, rgba(51,51,51,0.9) 0%, rgba(0,0,0,0.9) 100%);
background: -webkit-linear-gradient(top, rgba(51,51,51,0.9) 0%, rgba(0,0,0,0.9) 100%);
background: linear-gradient(to bottom, rgba(51,51,51,0.9) 0%, rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6333333', endColorstr='#e6000000', GradientType=0 );
-webkit-box-shadow: 0px -3px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px -3px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px -3px 5px 0px rgba(0,0,0,0.3);
display: none;
}
.inq-bottom * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Yu Gothic','游ゴシック体','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
}
.inq-fixed {
display: block;
position: fixed;
left: 0;
z-index: 10000;
}
.inq-wrap {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
margin: 0 auto;
}
.inq-wrap ul {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
padding: 3px;
margin: 0 auto;
}
.inq-wrap ul li {
display: block;
width: calc( 50% - 6px );
margin: 3px;
}
.inq-wrap ul li a {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: 40px;
font-size: 16px;
line-height: 1.5em;
font-weight: bold;
color: #ffffff;
text-decoration: none;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.inq-wrap ul li.inq-tel a {
background-color: #31ace5;
}
.inq-wrap ul li.inq-line a {
background-color: #00c300;
}
.inq-wrap ul li a:hover {
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
.inq-wrap ul li a i.fa {
}
.inq-wrap ul li a i.fa {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 24px;
height: 24px;
font-family: FontAwesome;
font-size: 1.8em;
line-height: 0.9em;
text-indent: 0;
}
.inq-wrap ul li a i.ic-tel:after {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 20px;
height: 20px;
margin-right: 0.2em;
content: "\f095";
font-size: 1.4em;
line-height: 1.1em;
text-indent: 0;
}
.inq-wrap ul li a i.ic-line:after {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 20px;
height: 20px;
margin-right: 0.3em;
content: "\e900";
font-size: 1.4em;
line-height: 1.1em;
text-indent: 0;
}  section.common, 
section.contact, 
section.privacy, 
section.line {
width: 100%;
padding: 50px 0;
text-align: center;
}
section.stock {
width: 100%;
padding: 50px 0;
text-align: center;
}
.sp-slide {
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
.sp-slide a {
text-decoration: none;
pointer-events: none;
cursor: default;
}
.sp-selected {
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
.sp-selected a {
text-decoration: none;
pointer-events: initial;
cursor: pointer;
}
.stock-entry {
position: relative;
width: 100%;
height: auto;
}
.stock-img {
width: 100%;
height: auto;
background-image: url(//www.cloud-fukuoka.jp/wordpress/wp-content/themes/cloud-fukuoka/img/default_image.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.stock-info {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
width: 100%;
height: auto;
padding: 15px;
background-color: #1e1e1e;
}
.stock-status {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
width: 80px;
height: auto;
}
@media screen and (min-width: 481px) {
.stock-status {
width: 140px;
}
}
.tag-import {
display: block;
width: calc( 100% - 4px );
height: auto;
padding: 3px;
margin: 2px;
font-family: 'Yu Gothic','游ゴシック体','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
font-size: 10px;
line-height: 1.5em;
font-weight: normal;
color: #f44995;
text-align: center;
border: 1px solid #f44995;
}
@media screen and (min-width: 481px) {
.tag-import {
padding: 5px;
font-size: 16px;
}
}
.tag-steering {
display: block;
width: calc( 100% - 4px );
height: auto;
padding: 3px;
margin: 2px;
font-family: 'Yu Gothic','游ゴシック体','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
font-size: 10px;
line-height: 1.5em;
font-weight: normal;
color: #31ace5;
text-align: center;
border: 1px solid #31ace5;
}
@media screen and (min-width: 481px) {
.tag-steering {
padding: 5px;
font-size: 16px;
}
}
.stock-title {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
width: calc( 100% - 90px );
height: auto;
}
@media screen and (min-width: 481px) {
.stock-title {
width: calc( 100% - 160px );
}
}
.stock-title p {
display: -webkit-box;
display: box;
-webkit-box-orient: vertical;
box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
font-size: 14px;
line-height: 1.8em;
font-weight: bold;
color: #fff;
text-align: left;
}
@media screen and (min-width: 481px) {
.stock-title p {
font-size: 18px;
}
}
.new-entry {
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 100px;
height: auto;
padding: 10px 0;
font-family: Verdana, Geneva, sans-serif;
font-style: italic;
font-size: 12px;
line-height: 1.5em;
font-weight: bold;
color: #fff;
background-color: rgba(0,0,0,0.8);
}
@media screen and (min-width: 481px) {
.new-entry {
width: 150px;
padding: 20px 0;
font-size: 18px;
}
}
.stock-tab {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
padding: 30px 5px 0 5px;
}
.stock-tab a {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: calc( 33.3333333% - 20px );
max-width: 300px;
height: 50px;
margin: 0 10px;
font-size: 18px;
line-height: 1.5em;
font-weight: bold;
text-decoration: none;
color: #777;
background-color: #333;
}
.stock-tab a:hover {
color: #fff;
background-color: #000;
}
a.tab-selected {
color: #fff;
background-color: #333;
text-decoration: none;
pointer-events: none;
cursor: default;
}
.stock-wrap {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding: 25px 10px;
}
.stock-wrap .stock-entry {
width: 100%;
margin: 25px 10px;
}
@media screen and (min-width: 769px) {
.stock-wrap .stock-entry {
width: calc( 50% - 20px );
}
}
@media screen and (min-width: 1025px) {
.stock-wrap .stock-entry {
width: calc( 33.33% - 20px );
}
}
.stock-wrap .stock-entry a {
text-decoration: none;
background-color: #fff;
}
.stock-wrap .stock-entry a .stock-img, 
.stock-wrap .stock-entry a .stock-info {
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.stock-wrap .stock-entry a:hover .stock-img, 
.stock-wrap .stock-entry a:hover .stock-info {
filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
.stock-wrap .stock-status {
width: 80px;
}
@media screen and (min-width: 481px) {
.stock-wrap .stock-status {
width: 140px;
}
}
@media screen and (min-width: 769px) {
.stock-wrap .stock-status {
width: 80px;
}
}
@media screen and (min-width: 1281px) {
.stock-wrap .stock-status {
width: 140px;
}
}
.stock-wrap .tag-import {
padding: 3px;
font-size: 10px;
}
@media screen and (min-width: 481px) {
.stock-wrap .tag-import {
padding: 5px;
font-size: 16px;
}
}
@media screen and (min-width: 769px) {
.stock-wrap .tag-import {
padding: 3px;
font-size: 10px;
}
}
@media screen and (min-width: 1281px) {
.stock-wrap .tag-import {
padding: 5px;
font-size: 16px;
}
}
.stock-wrap .tag-steering {
padding: 3px;
font-size: 10px;
}
@media screen and (min-width: 481px) {
.stock-wrap .tag-steering {
padding: 5px;
font-size: 16px;
}
}
@media screen and (min-width: 769px) {
.stock-wrap .tag-steering {
padding: 3px;
font-size: 10px;
}
}
@media screen and (min-width: 1281px) {
.stock-wrap .tag-steering {
padding: 5px;
font-size: 16px;
}
}
.stock-wrap .tag-sold {
color: #666;
border: 1px solid #999;
}
.stock-wrap .stock-title {
width: calc( 100% - 90px );
}
@media screen and (min-width: 481px) {
.stock-wrap .stock-title {
width: calc( 100% - 160px );
}
}
@media screen and (min-width: 769px) {
.stock-wrap .stock-title {
width: calc( 100% - 90px );
}
}
@media screen and (min-width: 1281px) {
.stock-wrap .stock-title {
width: calc( 100% - 160px );
}
}
.stock-wrap .stock-title p {
font-size: 14px;
}
@media screen and (min-width: 481px) {
.stock-wrap .stock-title p {
font-size: 18px;
}
}
@media screen and (min-width: 769px) {
.stock-wrap .stock-title p {
font-size: 14px;
}
}
@media screen and (min-width: 1281px) {
.stock-wrap .stock-title p {
font-size: 18px;
}
}
.stock-wrap .stock-spec {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-end;
align-items: flex-end;
width: 100%;
padding: 5px 0 0 0;
}
.stock-wrap .stock-spec .stock-epoch-dist {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: auto;
padding: 10px 0 0 0;
}
.stock-wrap .stock-spec .stock-epoch-dist p {
display: inline-block;
width: auto;
margin: 0 1em 0 0;
font-size: 11px;
line-height: 1em;
color: #fff;
}
@media screen and (min-width: 481px) {
.stock-wrap .stock-spec .stock-epoch-dist p {
font-size: 14px;
}
}
@media screen and (min-width: 769px) {
.stock-wrap .stock-spec .stock-epoch-dist p {
font-size: 12px;
}
}
@media screen and (min-width: 1281px) {
.stock-wrap .stock-spec .stock-epoch-dist p {
font-size: 14px;
}
}
.stock-wrap .stock-price {
width: auto;
padding: 10px 0 0 0;
}
.stock-wrap .stock-price p {
font-size: 14px;
line-height: 1em;
font-weight: bold;
text-align: right;
color: #fff;
}
@media screen and (min-width: 481px) {
.stock-wrap .stock-price p {
font-size: 20px;
}
}
@media screen and (min-width: 769px) {
.stock-wrap .stock-price p {
font-size: 18px;
}
}
@media screen and (min-width: 1281px) {
.stock-wrap .stock-price p {
font-size: 22px;
}
}
.stock-wrap .stock-price p.stock-sold {
color: #f14e4f;
}
.stock-wrap .new-entry {
width: 100px;
padding: 10px 0;
font-size: 12px;
}
@media screen and (min-width: 481px) {
.stock-wrap .new-entry {
width: 150px;
padding: 20px 0;
font-size: 18px;
}
}
@media screen and (min-width: 769px) {
.stock-wrap .new-entry {
width: 100px;
padding: 10px 0;
font-size: 12px;
}
}
@media screen and (min-width: 1281px) {
.stock-wrap .new-entry {
width: 150px;
padding: 20px 0;
font-size: 18px;
}
}
.inner-wrap {
width: 100%;
max-width: 1400px;
margin: 0 auto;
}
.flex-wrap {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
section.news {
width: 100%;
padding: 50px 5%;
text-align: center;
background-color: #000; background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background: #111;
}
section.assessment {
width: 100%;
height: 400px;
padding: 50px 5%;
text-align: center;
background-image: url(//www.cloud-fukuoka.jp/wordpress/wp-content/themes/cloud-fukuoka/img/index/bg-assessment.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
@media screen and (min-width: 769px) {
section.assessment {
height: 500px;
}
}
section.shop {
width: 100%;
height: 400px;
padding: 50px 5%;
text-align: center;
background-image: url(//www.cloud-fukuoka.jp/wordpress/wp-content/themes/cloud-fukuoka/img/index/bg-shopinfo.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
@media screen and (min-width: 769px) {
section.shop {
height: 500px;
}
}
section.sec-clear {
height: auto;
background-image: url(//www.cloud-fukuoka.jp/wordpress/wp-content/themes/cloud-fukuoka/none);
}
h2.sec-title {
display: inline-block;
width: auto;
padding: 10px 20px;
margin: 0 auto 15px;
font-size: 30px;
line-height: 1.5em;
font-weight: normal;
text-align: center;
color: #fff;
border-bottom: 1px solid #b2b2b2;
}
@media screen and (min-width: 481px) {
h2.sec-title {
font-size: 30px;
padding: 10px 40px;
}
}
h3.sec-subtitle {
display: block;
width: 100%;
margin-bottom: 15px;
font-size: 12px;
line-height: 1.5em;
font-weight: normal;
text-align: center;
color: #b2b2b2;
}
ul.news-wrap {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
}
ul.news-wrap li {
display: block;
width: 100%;
}
ul.news-wrap li a {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: flex-start;
align-items: flex-start;
width: 100%;
padding: 10px;
text-decoration: none;
background-color: transparent;
}
@media screen and (min-width: 481px) {
ul.news-wrap li a {
padding: 10px 20px;
}
}
ul.news-wrap li a:hover {
text-decoration: none;
background-color: rgba(255,255,255,0.3);
}
ul.news-wrap li a .news-date {
display: block;
width: 100%;
font-size: 14px;
line-height: 1.8em;
font-weight: normal;
text-align: left;
text-decoration: none;
color: #999;
}
@media screen and (min-width: 481px) {
ul.news-wrap li a .news-date {
width: 120px;
font-size: 16px;
}
}
ul.news-wrap li a .news-title {
display: block;
width: 100%;
font-size: 16px;
line-height: 1.8em;
font-weight: normal;
text-align: left;
text-decoration: none;
color: #fff;
}
@media screen and (min-width: 481px) {
ul.news-wrap li a .news-title {
width: calc( 100% - 120px );
font-size: 18px;
}
}
p.archive-link {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
margin: 50px auto 0;
}
@media screen and (min-width: 481px) {
p.archive-link  {
max-width: 300px;
}
}
.stock p.archive-link {
width: 90%;
}
@media screen and (min-width: 481px) {
.stock p.archive-link  {
width: 100%;
max-width: 300px;
}
}
p.archive-link a {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: 60px;
font-size: 16px;
line-height: 1.5em;
font-weight: bold;
text-decoration: none;
color: #fff;
background-color: transparent;
border: 1px solid #fff;
}
p.archive-link a:hover {
text-decoration: none;
color: #000;
background-color: #fff;
}
p.content-link {
display: inline-block;
width: 100%;
max-width: 640px;
margin-top: 60px;
text-align: center;
}
p.content-link a {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: 60px;
font-size: 16px;
line-height: 1.5em;
font-weight: bold;
text-decoration: none;
color: #fff;
background-color: transparent;
border: 1px solid #fff;
}
@media screen and (min-width: 481px) {
p.content-link a {
height: 80px;
font-size: 20px;
}
}
@media screen and (min-width: 769px) {
p.content-link a {
font-size: 18px;
}
}
@media screen and (min-width: 1025px) {
p.content-link a {
font-size: 24px;
}
}
p.content-link a:hover {
text-decoration: none;
color: #000;
background-color: #fff;
}
p.toptxt {
font-size: 16px;
line-height: 1.8em;
font-weight: bold;
text-align: center;
color: #fff;
margin: 40px auto 10px auto;
}
@media screen and (min-width: 481px) {
p.toptxt {
font-size: 22px;
margin: 50px auto 20px auto;
}
}
@media screen and (min-width: 769px) {
p.toptxt {
font-size: 30px;
}
}
p.topsubtxt {
font-size: 14px;
line-height: 1.7em;
font-weight: bold;
text-align: center;
color: #fff;
margin: 10px auto 40px auto;
}
@media screen and (min-width: 481px) {
p.topsubtxt {
font-size: 16px;
margin: 20px auto 50px auto;
}
}
@media screen and (min-width: 769px) {
p.topsubtxt {
font-size: 18px;
}
}
.topimage {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.contact-board {
width: 100%;
margin: 0 auto 40px;
}
@media screen and (min-width: 481px) {
.contact-board {
margin: 0 auto 50px;
}
}
@media screen and (min-width: 769px) {
.contact-board {
margin: 0 auto 60px;
}
}
.contact-board p {
font-size: 16px;
line-height: 1.7em;
font-weight: bold;
color: #fff;
margin: 20px auto;
}
@media screen and (min-width: 481px) {
.contact-board p {
font-size: 18px;
margin: 20px auto;
}
}
.contact-wrap {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.contact-wrap a {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-content: center;
align-content: center;
width: 100%;
height: 120px;
margin: 10px 0;
text-decoration: none;
}
@media screen and (min-width: 769px) {
.contact-wrap a {
width: calc( 33.33% - 10px );
}
}
@media screen and (min-width: 1025px) {
.contact-wrap a {
width: calc( 33.33% - 20px );
}
}
.contact-wrap a:hover {
filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
.contact-wrap a.contact-tel {
background-color: #941527;
}
.contact-wrap a.contact-web {
background-color: #000;
}
.contact-wrap a.contact-line {
background-color: #00b900;
}
.contact-wrap a h3 {
margin: 0 auto 15px;
width: 100%;
font-size: 16px;
line-height: 1em;
font-weight: bold;
color: #fff;
}
@media screen and (min-width: 769px) {
.contact-wrap a h3 {
font-size: 12px;
}
}
@media screen and (min-width: 1025px) {
.contact-wrap a h3 {
font-size: 16px;
}
}
.contact-wrap a p {
margin: 0 auto 5px;
width: 100%;
font-size: 30px;
line-height: 1em;
font-weight: bold;
color: #fff;
}
@media screen and (min-width: 769px) {
.contact-wrap a p {
font-size: 22px;
}
}
@media screen and (min-width: 1025px) {
.contact-wrap a p {
font-size: 30px;
}
}
.contact-wrap a p span {
display: inline;
margin-right: 10px;
}
.contact-wrap a p span img {
width: auto;
height: 26px;
}
@media screen and (min-width: 769px) {
.contact-wrap a p span img {
height: 20px;
}
}
@media screen and (min-width: 1025px) {
.contact-wrap a p span img {
height: 26px;
}
}
.contact-wrap a.contact-tel p {
font-size: 36px;
}
@media screen and (min-width: 769px) {
.contact-wrap a.contact-tel p {
font-size: 24px;
}
}
@media screen and (min-width: 1025px) {
.contact-wrap a.contact-tel p {
font-size: 36px;
}
}
.contact-wrap a.contact-web p i.ic-mail::after {
display: inline-block;
width: auto;
height: auto;
margin-right: 10px;
content: "\f0e0";
font-size: 30px;
line-height: 1em;
text-indent: 0;
}
@media screen and (min-width: 769px) {
.contact-wrap a.contact-web p i.ic-mail::after {
font-size: 24px;
}
}
@media screen and (min-width: 1025px) {
.contact-wrap a.contact-web p i.ic-mail::after {
font-size: 30px;
}
}
.contact-wrap a.contact-line p i.ic-line::after {
display: inline-block;
width: auto;
height: auto;
margin-right: 10px;
content: "\e900";
font-size: 30px;
line-height: 1em;
text-indent: 0;
}
@media screen and (min-width: 769px) {
.contact-wrap a.contact-line p i.ic-line::after {
font-size: 24px;
}
}
@media screen and (min-width: 1025px) {
.contact-wrap a.contact-line p i.ic-line::after {
font-size: 30px;
}
}
.caution-board {
width: 100%;
padding: 15px;
border: 2px solid #000;
}
@media screen and (min-width: 481px) {
.caution-board {
padding: 20px;
}
}
@media screen and (min-width: 769px) {
.caution-board {
padding: 40px;
}
}
.caution-board  h3 {
font-size: 16px;
line-height: 1.8em;
font-weight: bold;
text-align: center;
color: #fff;
margin: 0 auto 10px auto;
}
@media screen and (min-width: 481px) {
.caution-board  h3 {
font-size: 22px;
margin: 0 auto 20px auto;
}
}
@media screen and (min-width: 769px) {
.caution-board  h3 {
font-size: 30px;
margin: 0 auto 30px auto;
}
}
.caution-board p {
font-size: 12px;
line-height: 1.7em;
font-weight: bold;
color: #fff;
margin: 0 auto;
}
@media screen and (min-width: 481px) {
.caution-board p {
font-size: 16px;
}
}
@media screen and (min-width: 481px) {
.caution-board p {
font-size: 18px;
}
}
.caution-wrap {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
padding: 15px 0 0 0;
}
@media screen and (min-width: 481px) {
.caution-wrap {
padding: 20px 0 0 0;
}
}
@media screen and (min-width: 1025px) {
.caution-wrap {
padding: 20px 10px 10px 10px;
}
}
.caution-wrap a {
display: block;
width: calc( 50% - 10px );
margin: 5px;
}
@media screen and (min-width: 481px) {
.caution-wrap a {
width: calc( 50% - 20px );
margin: 10px;
}
}
@media screen and (min-width: 769px) {
.caution-wrap a {
width: calc( 33.33% - 40px );
margin: 20px;
}
}
.shop-top {
margin: 50px auto 0 auto;
} p.shoptoptxt {
font-size: 16px;
line-height: 1.8em;
font-weight: bold;
text-align: center;
color: #fff;
margin: 40px auto;
}
@media screen and (min-width: 481px) {
p.shoptoptxt {
font-size: 20px;
margin: 60px auto;
}
}
@media screen and (min-width: 769px) {
p.shoptoptxt {
font-size: 24px;
margin: 80px auto;
}
}
@media screen and (min-width: 1025px) {
p.shoptoptxt {
font-size: 30px;
}
}
.shop-img-wrap {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.shop-img-wrap a {
display: block;
width: calc( 100% - 10px );
margin: 5px;
}
@media screen and (min-width: 481px) {
.shop-img-wrap a {
width: calc( 100% - 20px );
margin: 10px;
}
}
@media screen and (min-width: 769px) {
.shop-img-wrap a {
width: calc( 33.33% - 20px );
margin: 10px;
}
}
.shop-service-wrap {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding: 5px;
margin-top: 40px;
}
@media screen and (min-width: 481px) {
.shop-service-wrap {
margin-top: 60px;
}
}
@media screen and (min-width: 769px) {
.shop-service-wrap {
margin-top: 80px;
}
}
.shop-service {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
}
@media screen and (min-width: 481px) {
.shop-service {
padding: 15px;
margin: 10px 0;
}
}
@media screen and (min-width: 769px) {
.shop-service {
width: calc( 50% - 10px );
padding: 10px 5px;
margin: 5px;
}
}
@media screen and (min-width: 1025px) {
.shop-service {
padding: 15px;
}
}
.shop-service h3 {
display: block;
width: 100%;
font-size: 18px;
line-height: 1.7em;
font-weight: bold;
margin-bottom: 5px;
}
@media screen and (min-width: 481px) {
.shop-service h3 {
font-size: 24px;
margin-bottom: 10px;
}
}
@media screen and (min-width: 769px) {
.shop-service h3 {
font-size: 18px;
}
}
@media screen and (min-width: 1025px) {
.shop-service h3 {
font-size: 24px;
}
}
.shop-service h3 strong {
font-size: 24px;
}
@media screen and (min-width: 481px) {
.shop-service h3 strong {
font-size: 36px;
}
}
@media screen and (min-width: 769px) {
.shop-service h3 strong {
font-size: 24px;
}
}
@media screen and (min-width: 1025px) {
.shop-service h3 strong {
font-size: 36px;
}
}
.shop-service p {
display: block;
width: 100%;
font-size: 14px;
line-height: 1.7em;
font-weight: bold;
margin-bottom: 10px;
}
@media screen and (min-width: 481px) {
.shop-service p {
font-size: 18px;
margin-bottom: 20px;
}
}
@media screen and (min-width: 769px) {
.shop-service p {
font-size: 12px;
margin-bottom: 10px;
}
}
@media screen and (min-width: 1025px) {
.shop-service p {
font-size: 14px;
margin-bottom: 20px;
}
}
.shop-service .service-img {
padding: 5px;
}
.shop-service .service-link {
padding: 5px;
}
.shop-service .service-link a {
display: inline-block;
width: auto;
padding: 10px 20px;
margin: 0 auto;
font-size: 16px;
line-height: 1em;
font-weight: bold;
color: #f942bb;
border: 1px solid #f942bb;
text-decoration: none;
}
@media screen and (min-width: 481px) {
.shop-service .service-link a {
font-size: 18px;
}
}
@media screen and (min-width: 769px) {
.shop-service .service-link a {
font-size: 14px;
padding: 10px;
}
}
@media screen and (min-width: 1025px) {
.shop-service .service-link a {
font-size: 18px;
padding: 10px 20px;
}
}
.shop-service .service-link a:hover {
color: #fff;
background-color: #f942bb;
}
.company-info {
margin-top: 40px;
}
@media screen and (min-width: 481px) {
.company-info {
margin-top: 60px;
}
}
@media screen and (min-width: 769px) {
.company-info {
margin-top: 80px;
}
}
@media screen and (min-width: 1025px) {
.company-info {
margin-top: 100px;
}
}
.company-info h2 {
margin-bottom: 10px;
font-size: 24px;
line-height: 1.7em;
font-weight: bold;
color: #b6b6b6;
}
@media screen and (min-width: 769px) {
.company-info h2 {
margin-bottom: 50px;
font-size: 30px;
}
}
.company-info table {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.company-info tr {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.company-info th {
display: block;
width: 100%;
padding: 10px;
margin: 0;
font-size: 14px;
line-height: 1.7em;
font-weight: bold;
color: #fff;
text-align: left;
border-bottom: 1px solid #666;
}
@media screen and (min-width: 769px) {
.company-info th {
width: 200px;
padding: 15px 15px;
margin: 0 10px;
font-size: 16px;
}
}
@media screen and (min-width: 1025px) {
.company-info th {
width: 220px;
padding: 15px 25px;
margin: 0 20px;
}
}
.company-info td {
display: block;
width: 100%;
padding: 10px ;
margin: 0 0 25px 0;
font-size: 14px;
line-height: 1.7em;
font-weight: bold;
color: #fff;
text-align: left;
}
@media screen and (min-width: 769px) {
.company-info td {
width: calc( 100% - 240px );
padding: 15px 15px;
margin: 0 10px;
font-size: 16px;
border-bottom: 1px solid #666;
}
}
@media screen and (min-width: 1025px) {
.company-info td {
width: calc( 100% - 300px );
padding: 15px 25px;
margin: 0 20px;
}
}
.access-info {
margin-top: 40px;
}
@media screen and (min-width: 481px) {
.access-info {
margin-top: 60px;
}
}
@media screen and (min-width: 769px) {
.access-info {
margin-top: 80px;
}
}
@media screen and (min-width: 1025px) {
.access-info {
margin-top: 100px;
}
}
.access-info h2 {
margin-bottom: 30px;
font-size: 24px;
line-height: 1.7em;
font-weight: bold;
color: #b6b6b6;
}
@media screen and (min-width: 769px) {
.access-info h2 {
margin-bottom: 50px;
font-size: 30px;
}
}
.access-info ul {
width: 100%;
padding: 0 10px;
margin: 30px auto;
}
@media screen and (min-width: 481px) {
.access-info ul {
margin: 40px auto;
}
}
@media screen and (min-width: 769px) {
.access-info ul {
margin: 50px auto;
}
}
@media screen and (min-width: 1025px) {
.access-info ul {
max-width: 960px;
padding: 0;
}
}
.access-info ul li {
font-size: 12px;
line-height: 1.6em;
color: #b6b6b6;
text-align: left;
margin: 10px 0;
}
@media screen and (min-width: 481px) {
.access-info ul li {
font-size: 14px;
}
}
@media screen and (min-width: 769px) {
.access-info ul li {
font-size: 16px;
}
}
.pp-content {
padding: 30px 5% 0 5%;
text-align: left;
}
@media (min-width: 481px) {
.pp-content {
padding: 40px 5% 0 5%;
}
}
@media (min-width: 769px) {
.pp-content {
padding: 50px 5% 0 5%;
}
}
.pp-content h3 {
font-size: 18px;
line-height: 1.5em;
font-weight: bold;
margin-bottom: 0.5em;
color: #fff;
}
@media (min-width: 481px) {
.pp-content h3 {
font-size: 22px;
}
}
.pp-content p {
font-size: 12px;
line-height: 1.5em;
margin-bottom: 3em;
}
@media (min-width: 481px) {
.pp-content p {
font-size: 16px;
}
}
.pp-content p.pmb1em {
margin-bottom: 1em;
}
.pp-content ul {
margin: 0 0 3.5em 1em;
}
.pp-content ul li {
margin: 0 0 1em 1em;
font-size: 12px;
line-height: 1.5em;
list-style-image: url(//www.cloud-fukuoka.jp/wordpress/wp-content/themes/cloud-fukuoka/img/lidot.png);
}
@media (min-width: 481px) {
.pp-content ul li {
font-size: 16px;
}
}
.inner-content {
padding: 30px 5% 0 5%;
}
@media (min-width: 481px) {
.inner-content {
padding: 40px 5% 0 5%;
}
}
@media (min-width: 769px) {
.inner-content {
padding: 50px 5% 0 5%;
}
}
#mcwrap {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (min-width: 1025px) {
#mcwrap {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
max-width: 1400px;
margin: 0 auto;
}
}
#mcleft {
width: 100%;
}
@media (min-width: 1025px) {
#mcleft {
width: 70%;
}
}
#mcright {
width: 100%;
margin-top: 2rem;
}
@media (min-width: 769px) {
#mcright {
margin-top: 4rem;
}
}
@media (min-width: 1025px) {
#mcright {
width: 27%;
margin-top: 0;
}
}
#mcleft img, #mcright img {
width: auto;
max-width: 100%;
height: auto;
} article p, 
#msp article p {
margin: 0 0 1.0rem 0;
}
article img {
display: block;
width: auto;
max-width: 100%;
height: auto;
vertical-align: baseline;
}
article img.alignleft {
border: none;
padding: 0;
margin: 0.5rem 1.0rem 0.5rem 0;
float: left;
}
article img.alignright {
border: none;
padding: 0;
margin: 0.5rem 0 0.5rem 1.0rem;
float: right;
}
article img.aligncenter {
border: none;
padding: 0;
clear: both;
display: block;
margin: 1.0rem auto;
}
article img.alignnone {
border: none;
padding: 0;
margin: 0;
}
@media (max-width: 599px) {
article img.alignleft,  
article img.alignright {
float: none;
margin: 1.0rem auto;
}
}
.container-inner img.alignleft, 
.container-inner img.alignright {
float: none;
margin: 0;
}
article .video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
margin: 1rem 0;
overflow: hidden;
}
article .video-container iframe, 
article .video-container object, 
article .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
article.post {
background: rgba(255,255,255,0.1);
}
article.post .eyecatch {
text-align: center;
}
article.post .eyecatch img {
margin: 0 auto;
}
article.post .entry {
padding: 20px 15px;
}
@media (min-width: 481px) {
article.post .entry {
padding: 25px 30px;
}
}
div.blog_info {
padding: 0 0 0.3rem 0;
margin: 0;
font-size: 0.7rem;
line-height: 1.0rem;
}
div.blog_info ul {
margin: 0px;
padding: 0px;
width: 100%;
}
div.blog_info li {
float: right;
list-style: none;
padding: 0px;
margin: 0 0 0 1rem;
text-align: right;
color: #ccc;
}
div.blog_info li:last-of-type {
margin: 0;
}
div.blog_info li a {
display: inline-block;
text-decoration: none;
color: #ccc;
}
div.blog_info li a:hover {
text-decoration: underline;
}
div.blog_info .dashicons {
font-size: 16px;
}
.title {
margin: 0 0 10px 0;
padding: 0;
font-weight: bold;
}
.title a {
text-decoration: none;
}
.title a:hover {
text-decoration: underline;
} .widget-area ul {
margin: 0;
padding: 0;
width: 100%;
}
.widget-area ul li.widget-container {
list-style: none;
min-height: 60px;
padding: 0;
margin: 0 0 2rem 0;
background: transparent;
}
@media (min-width: 481px) {
.widget-area ul li.widget-container {
margin: 0 0 3rem 0;
}
}
.widget-area h3.widget-title {
display: table-cell;
width: 100%;
font-size: 12px;
line-height: 30px;
font-weight: bold;
text-align: left;
color: #fff !important;
background: #333;
padding: 0 8px 0 0;
margin: 0;
}
.widget-area > ul > li {
padding: 0;
margin: 0 0 40px 0;
list-style: none;
}
.widget-area > ul > li:last-of-type {
margin: 0;
}
.widget-area ul li ul {
padding: 0;
margin: 0;
}
.widget-area ul li ul li {
list-style: none;
margin-top: 1px;
}
.widget-area ul li ul li.cat-item-none {
display: none;
}
.widget-area ul li ul li a {
width: 100%;
height: auto;
display: block;
padding: 10px;
margin: 0;
color: #fff;
line-height: 1.25em;
text-align: left;
background: rgba(255,255,255,0.1);
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.widget-area ul li ul li a:hover {
color: #fff;
background: #777;
} .widget-area ul li.widget_nav_menu ul {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.widget-area ul li.widget_nav_menu ul li {
width: calc( 100% - 2px );
height: auto;
margin: 1px;
font-size: 11px;
}
@media (min-width: 769px) {
.widget-area ul li.widget_nav_menu ul li {
width: calc( 50% - 2px );
}
}
@media (min-width: 1025px) {
.widget-area ul li.widget_nav_menu ul li {
width: calc( 100% - 2px );
}
} .widget-area ul li.widget_archive ul {
display: table;
padding: 10px 1%;
margin: 1px 0 0 0;
background: rgba(255,255,255,0.1);
}
.widget-area ul li.widget_archive ul li {
list-style: none;
border: none;
display: block;
margin: 1%;
float: left;
}
.widget-area ul li.widget_archive ul li a {
display: block;
color: #ccc;
background-color: transparent;
border: 1px solid #777;
padding: 0.35rem 0;
margin: 0;
position: relative;
top: -1px;
white-space: nowrap;
font-size: 0.7rem;
text-align: center;
text-indent: 0;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.widget-area ul li.widget_archive ul li a:hover {
color: #fff;
border: 1px solid #777;
background-color: #777;
}
.widget-area ul li.widget_archive ul li a:before {
content: none;
margin: 0;
}
@media (min-width: 1025px) {
.widget-area ul li.widget_archive ul li {
width: 31.33%;
}
}
@media (min-width: 851px) and (max-width: 1024px) {
.widget-area ul li.widget_archive ul li {
width: 10.5%;
}
}
@media (min-width: 769px) and (max-width: 850px) {
.widget-area ul li.widget_archive ul li {
width: 12.28%;
}
}
@media (min-width: 661px) and (max-width: 768px) {
.widget-area ul li.widget_archive ul li {
width: 14.66%;
}
}
@media (min-width: 551px) and (max-width: 660px) {
.widget-area ul li.widget_archive ul li {
width: 18%;
}
}
@media (min-width: 481px) and (max-width: 550px) {
.widget-area ul li.widget_archive ul li {
width: 23%;
}
}
@media (max-width: 480px) {
.widget-area ul li.widget_archive ul li {
width: 31.33%;
}
}
.widget-area ul.children, 
.widget-area ul.sub-menu {
padding: 0;
}
.widget-area ul li ul.children li a, 
.widget-area ul li ul.sub-menu li a {
padding: 10px 10px 10px 25px;
}
.widget-area .tagcloud {
padding: 0.5rem;
} .widget_calendar:before {
content: "\f508";
font-family: "Dashicons";
font-size: 1.25rem;
line-height: 30px;
color: #fff;
background: #333;
padding-right: 0.3rem;
padding-left: 0.3rem;
vertical-align: middle;
display: table-cell;
}
.widget_archive:before {
content: "\f145";
font-family: "Dashicons";
font-size: 1.25rem;
line-height: 30px;
color: #fff;
background: #333;
padding-right: 0.3rem;
padding-left: 0.3rem;
vertical-align: middle;
display: table-cell;
}
.widget_recent_entries:before {
content: "\f464";
font-family: "Dashicons";
font-size: 1.25rem;
line-height: 30px;
color: #fff;
background: #333;
padding-right: 0.3rem;
padding-left: 0.3rem;
vertical-align: middle;
display: table-cell;
}
.widget_tag_cloud:before {
content: "\f323";
font-family: "Dashicons";
font-size: 1.25rem;
line-height: 30px;
color: #fff;
background: #333;
padding-right: 0.3rem;
padding-left: 0.3rem;
vertical-align: middle;
display: table-cell;
}
.widget_categories:before {
content: "\f318";
font-family: "Dashicons";
font-size: 1.25rem;
line-height: 30px;
color: #fff;
background: #333;
padding-right: 0.3rem;
padding-left: 0.3rem;
vertical-align: middle;
display: table-cell;
}
.widget_nav_menu:before {
content: "\f318";
font-family: "Dashicons";
font-size: 1.25rem;
line-height: 30px;
color: #fff;
background: #333;
padding-right: 0.3rem;
padding-left: 0.3rem;
vertical-align: middle;
display: table-cell;
}
.widget_text:before {
content: "\f103";
font-family: "Dashicons";
font-size: 1.25rem;
line-height: 30px;
color: #fff;
background: #333;
padding-right: 0.3rem;
padding-left: 0.3rem;
vertical-align: middle;
display: table-cell;
}
@media (max-width: 480px) {
.widget_calendar:before, 
.widget_archive:before, 
.widget_recent_entries:before, 
.widget_tag_cloud:before, 
.widget_categories:before, 
.widget_nav_menu:before, 
.widget_text:before {
font-size: 1rem;
}
} #calendar_wrap {
padding: 10px 1% 5px 1%;
margin-top: 1px;
background: rgba(255,255,255,0.1);
}
#wp-calendar {
width: 100%;
}
table#wp-calendar {
border-collapse: separate;
border-spacing: 0.2rem;
}
#wp-calendar caption {
color: #ccc;
font-size: 0.8rem;
line-height: 1.0em;
font-weight: bold;
padding-bottom: 5px;
text-align: center;
}
#wp-calendar thead {
font-size: 0.6rem;
color: #ccc;
}
#wp-calendar thead th {
text-align: center;
}
#wp-calendar tbody {
color: #999;
}
#wp-calendar tbody td {
background: transparent;
border: 1px solid #777;
padding: 0.2rem;
text-align: center;
}
#wp-calendar tbody .pad {
background: none;
border: none;
}
#calendar_wrap .wp-calendar-nav {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
padding: 5px;
} article {
text-align: left;
padding: 0;
margin: 0 0 2rem 0;
}
@media (min-width: 769px) {
article {
margin: 0 0 4rem 0;
}
} h1, h2, h3, h4, h5 {
font-weight: 400;
margin: 0;
}
h1 {
font-size: 1.4rem;
line-height: 1.8rem;
}
h2 {
font-size: 1.1rem;
}
h3 {
font-size: 1.0rem;
}
h4 {
font-size: 0.9rem;
}
h5 {
font-size: 0.8rem;
}
p {
margin: 0 auto;
line-height: 1.5rem;
}
blockquote {
margin: 0;
}
blockquote p {
color: #bbb;
font-style: italic;
margin-bottom: 1.5rem;
}
cite {
color: #bbb;
} .button, 
a.button {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #333;
color: #fff;
text-decoration: none;
cursor: pointer;
display: block;
font-size: 1rem;
font-weight: 400;
text-align: center;
padding: 0.7rem 0;
vertical-align: middle;
white-space: nowrap;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media (min-width: 481px) {
.button, 
a.button {
display: inline-block;
font-size: 0.9rem;
padding: 0.7rem 1.5rem;
}
}
.button:hover, 
.button:focus, 
a.button:hover, 
a.button:focus {
color: #fff;
background: #666;
text-decoration: none;
} .pagenationmm {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
padding: 0;
margin: 0;
}
@media (min-width: 1025px) {
.pagenationmm {
display: block;
}
}
.pagenationmm-news, 
.pagenationmm-parts {
padding: 0 2%;
}
.pagination {
clear: both;
padding: 2rem 0;
margin: 0;
position: relative;
font-size: 0.9rem;
line-height: 1.4rem;
text-align: center;
}
@media (min-width: 769px) {
.pagination {
font-size: 1.0rem;
line-height: 1.6rem;
}
}
.pagination span, .pagination a {
display: block;
float: left;
margin: 2px 2px 2px 0px;
padding: 0;
text-decoration: none;
min-width: 1.4rem;
color: #fff;
background: #333;
white-space: nowrap;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media (min-width: 769px) {
.pagination span,  .pagination a {
min-width: 1.6rem;
}
}
.pagination a:hover {
color: #fff;
background: #666;
}
.pagination .current {
padding: 0;
background: #fff;
color: #000;
white-space: nowrap;
}
a.more-link {
display: block;
float: left;
font-size: 0.9rem;
line-height: 2rem;
color: #fff;
background: #333;
margin: 0 auto;
text-align: center;
width: 7.0rem;
padding: 0 0.5rem;
text-decoration: none;
white-space: nowrap;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a.more-link:hover {
color: #fff;
background: #666;
}
div.nav-below {
width: 16rem;
margin: 2rem auto;
overflow: auto;
text-align: center;
}
@media (min-width: 769px) {
div.nav-below {
margin: 4rem auto;
}
}
.nav-previous a {
display: block;
width: 7.0rem;
font-size: 0.9rem;
line-height: 2rem;
color: #fff;
background: #333;
margin: 1em auto;
text-align: center;
padding: 0 0.5rem;
text-decoration: none;
white-space: nowrap;
float: left;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-next a {
display: block;
width: 7.0rem;
font-size: 0.9rem;
line-height: 2rem;
color: #fff;
background: #333;
margin: 1em auto;
text-align: center;
padding: 0 0.5rem;
text-decoration: none;
white-space: nowrap;
float: right;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-previous a:hover, 
.nav-next a:hover {
color: #fff;
background: #666;
} #comments {
clear: both;
border-top: 1px solid #333;
padding: 0.5rem 0 0 0;
text-align: left;
}
#comments .navigation {
padding: 0 0 18px 0;
}
h3#comments-title, 
h3#reply-title {
font-size: 1.0rem;
font-weight: normal;
margin-bottom: 0;
}
h3#comments-title {
padding: 24px 0;
}
.commentlist {
list-style: none;
margin: 0;
}
.commentlist li.comment {
border-bottom: 1px solid #333;
line-height: 21px;
margin: 0 0 24px 0;
padding: 0 0 0 40px;
position: relative;
}
.commentlist li:last-child {
border-bottom: none;
margin-bottom: 0;
}
#comments .comment-body ul, 
#comments .comment-body ol {
margin-bottom: 18px;
}
#comments .comment-body p:last-child {
margin-bottom: 6px;
}
#comments .comment-body blockquote p:last-child {
margin-bottom: 24px;
}
.commentlist p {
font-size: 0.7rem !important;
line-height: 1.5em !important;
margin-bottom: 0.5rem !important;
}
ol.commentlist {
margin: 0;
padding: 0;
text-align: left;
}
.commentlist ol {
list-style: decimal;
}
.commentlist .avatar {
position: absolute;
top: 4px;
left: 0;
}
.comment-author {
}
.comment-author cite {
font-style: normal;
font-weight: bold;
}
.comment-author .says {
font-size: 0.8rem;
}
.comment-meta {
font-size: 12px;
margin: 0 0 10px 0;
}
.comment-meta a:link, 
.comment-meta a:visited {
color: #999;
text-decoration: none;
}
.comment-meta a:active, 
.comment-meta a:hover {
color: #ccc;
}
.commentlist .even {
}
.commentlist .bypostauthor {
}
.reply {
font-size: 12px;
padding: 0 0 1.5rem 0;
}
.commentlist .reply a {
display: block;
width: 3rem;
padding: 0 0.5rem;
background: #333;
font-size: 0.8rem;
line-height: 1.6rem;
color: #fff;
text-align: center;
text-decoration: none;
white-space: nowrap;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.commentlist .reply a:hover {
color: #fff;
background: #666;
}
a.comment-edit-link {
color: #888;
}
.commentlist .children {
list-style: none;
margin: 0;
padding: 0;
}
.commentlist .children li {
border: none;
margin: 0;
}
.nopassword, .nocomments {
display: none;
}
#comments .pingback {
border-bottom: 1px solid #333;
margin-bottom: 18px;
padding-bottom: 18px;
}
.commentlist li.comment+li.pingback {
margin-top: -6px;
}
#comments .pingback p {
color: #888;
display: block;
font-size: 12px;
line-height: 18px;
margin: 0;
}
#comments .pingback .url {
font-size: 13px;
font-style: italic;
} #respond {
border-top: 1px solid #333;
margin: 24px 0;
padding: 0.5rem 0 0 0;
overflow: hidden;
position: relative;
text-align: left;
}
#respond p {
display: block;
font-size: 0.7rem;
line-height: 1.5em !important;
margin: 0;
clear: both;
}
#respond .comment-notes {
margin-bottom: 1em;
}
.form-allowed-tags {
line-height: 1em;
}
.children #respond {
margin: 0 48px 0 0;
}
h3#reply-title {
margin: 0 0 0.5rem 0;
}
#comments-list #respond {
margin: 0 0 18px 0;
}
#comments-list ul #respond {
margin: 0;
}
#cancel-comment-reply-link {
font-size: 12px;
font-weight: normal;
line-height: 18px;
}
#respond input {
margin: 0;
width: 100%;
}
@media (min-width: 769px) {
#respond input {
width: 480px;
}
}
#respond input[type="submit"] {
cursor: pointer;
}
#respond textarea {
width: 100%;
}
#respond .form-allowed-tags {
color: #888;
font-size: 12px;
line-height: 18px;
}
#respond .form-allowed-tags code {
font-size: 11px;
}
#respond .form-submit {
margin: 2rem 0 0 0;
}
#respond .form-submit input {
font-size: 1rem;
} #respond p.comment-form-comment, 
#respond p.comment-form-author, 
#respond p.comment-form-email, 
#respond p.comment-form-url, 
#respond p.comment-form-cookies-consent {
margin-top: 1.5rem;
}
#respond p.comment-form-cookies-consent {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: flex-start;
align-items: flex-start;
line-height: 1.25em;
}
#respond p.comment-form-cookies-consent input[type="checkbox"] {
display: inline-block;
width: 16px;
margin: 3px 0 0 0;
}
#respond p.comment-form-cookies-consent label {
display: inline-block;
width: calc( 100% - 16px );
padding: 2px 0 0 4px;
}
#respond .required {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.9rem;
font-weight: normal;
vertical-align: middle;
color: #fff;
margin: 0;
}
#respond p label {
font-size: 0.7rem;
margin: 0;
}
#respond input {
display: block;
}
.si_captcha_small {
margin-top: 1.5rem;
}
#respond p input#si_captcha_code {
display: block;
width: 100px;
} input[type="text"], 
input[type="tel"], 
input[type="email"], 
input[type="number"], 
input[type="file"], 
textarea, 
select {
border: 1px solid #333;
padding: 10px;
color: #555;
font-size: 16px;
line-height: 1.5em;
background: #fff;
}
@media (min-width: 481px) {
input[type="text"], 
input[type="tel"], 
input[type="email"], 
input[type="number"], 
input[type="file"], 
textarea, 
select {
font-size: 0.8rem;
}
}
input[type="submit"], 
input[type="reset"], 
input[type="button"] {
display: block;
font-size: 16px;
line-height: 1.6rem;
font-weight: 600;
color: #fff;
background: #333;
margin: 1em auto;
padding: 0.7rem 1.5rem;
border: none;
width: 100%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media (min-width: 481px) {
input[type="submit"], 
input[type="reset"], 
input[type="button"] {
max-width: 18rem;
font-size: 1.0rem;
}
}
input[type="submit"]:hover, 
input[type="reset"]:hover, 
input[type="button"]:hover {
color: #fff;
background: #666;
text-decoration: none;
}
input[disabled] {
cursor: default;
pointer-events: none;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
} .search_unit {
display: block;
padding: 0;
text-align: left;
}
.search_unit input[type="submit"] {
margin: 0;
padding: 0;
}
.search_unit p {
margin: 50px 0px 5px 0px !important;
}
h2.search {
font-size: 1.1rem !important;
line-height: 1.8rem !important;
margin: 0px !important;
}
h3.search {
font-size: 1.1rem !important;
line-height: 1.8rem !important;
margin: 0px !important;
}
h2.result {
font-size: 1.1rem !important;
line-height: 1.8rem !important;
text-align: left;
margin: 50px 0 5px 0 !important;
}
h2.result a {
}
h2.result a:hover {
}
p.search {
margin-bottom: 0 !important;
}
.search_word {
color: #ffb900 !important;
}
#s {
width: 200px;
margin-bottom: 30px;
padding: 5px 30px 5px 5px;
}
#searchsubmit {
display: inline-block;
margin-left: -33px;
box-shadow: none;
background-image: url(//www.cloud-fukuoka.jp/wordpress/wp-content/themes/cloud-fukuoka/none);
background-color: transparent;
width: 25px;
border: none;
text-indent: -100px;
cursor: pointer;
position: relative;
}
#searchform {
margin-top: -20px;
text-align: left;
}
#searchform:before {
content: "\f179";
font-family: "Dashicons";
font-size: 1.8rem;
line-height: 1.0rem;
color: #000;
top: 36px;
left: 170px;
position: relative;
}
.screen-reader-text {
display: none;
} .form-content {
width: 100%;
max-width: 1400px;
padding: 20px 5%;
margin: 0 auto;
}
@media screen and (min-width: 481px) {
.form-content {
padding: 30px 5%;
}
}
@media screen and (min-width: 769px) {
.form-content {
padding: 40px 5%;
}
}
.form-content h3 {
font-size: 16px;
line-height: 1.7em;
margin-bottom: 1em;
}
@media screen and (min-width: 481px) {
.form-content h3 {
font-size: 18px;
}
}
@media screen and (min-width: 769px) {
.form-content h3 {
font-size: 20px;
}
}
@media screen and (min-width: 1025px) {
.form-content h3 {
font-size: 22px;
}
}
.form-content p {
font-size: 12px;
line-height: 1.7em;
margin-bottom: 1em;
}
.privacy-btn {
margin: 20px 0;
}
@media screen and (min-width: 481px) {
.privacy-btn {
text-align: center;
}
}
.form-content p.required-caution {
text-align: left;
}
@media screen and (min-width: 769px) {
.form-content p.required-caution {
margin-left: 10px;
}
}
@media screen and (min-width: 1025px) {
.form-content p.required-caution {
margin-left: 20px;
}
}
.form-content table {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
margin: 0 auto;
}
.form-content tbody {
width: 100%;
}
.form-content tr {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
}
.form-content th {
display: block;
width: 100%;
padding: 10px;
margin: 0;
font-size: 14px;
line-height: 1.7em;
font-weight: bold;
color: #fff;
text-align: left;
border-bottom: 1px solid #666;
}
@media screen and (min-width: 769px) {
.form-content th {
width: calc( 33.33% - 20px );
padding: 22px 10px;
margin: 0 10px;
font-size: 16px;
}
}
@media screen and (min-width: 1025px) {
.form-content th {
width: calc( 33.33% - 40px );
padding: 22px 25px;
margin: 0 20px;
}
}
@media screen and (min-width: 1281px) {
.form-content th {
width: calc( 25% - 40px );
padding: 22px 25px;
margin: 0 20px;
}
}
.form-content td {
display: block;
width: 100%;
padding: 10px ;
margin: 0 0 25px 0;
font-size: 14px;
line-height: 1.7em;
font-weight: bold;
color: #fff;
text-align: left;
}
@media screen and (min-width: 769px) {
.form-content td {
width: calc( 66.6% - 20px );
padding: 15px 10px;
margin: 0 10px;
font-size: 16px;
border-bottom: 1px solid #666;
}
}
@media screen and (min-width: 1025px) {
.form-content td {
width: calc( 66.66% - 40px );
padding: 15px 25px;
margin: 0 20px;
}
}
@media screen and (min-width: 1281px) {
.form-content td {
width: calc( 75% - 40px );
padding: 15px 25px;
margin: 0 20px;
}
}
.form-content label {
font-weight: 400;
}
.form-content .sml-cap {
font-size: 12px;
}
.formbox-mini {
width: 110px;
}
.formbox-short {
width: 100%;
}
.formbox-middle {
width: 100%;
}
.formbox-long {
width: 100%;
}
@media (min-width: 481px) {
.formbox-short {
max-width: 240px;
}
.formbox-middle {
max-width: 480px;
}
}
.hissu {
color: #fff;
font-size: 0.9rem;
font-weight: normal;
font-family: Verdana, Geneva, sans-serif;
vertical-align: middle;
margin: 0 0.3rem;
}
.tdsubmit {
text-align: center;
padding: 0;
}
@media (min-width: 481px) {
.tdsubmit {
padding: 2rem 0 0 0;
}
}
#go-form {
padding-top: 50px;
}
.formInner {
padding: 0;
}
.sent .formInner {
display: none;
}
.complete-display {
display: none;
}
.sent .complete-display {
width: 100%;
height: auto;
margin: 0px auto 0px auto;
padding: 6rem 0;
display: block;
text-align: center;
}
.sent .complete-display h3 {
margin: 0 0 1rem 0;
padding: 0;
font-size: 1.2rem;
line-height: 1.4em;
font-weight: bold;
}
span.wpcf7-not-valid-tip {
top: 0px;
left: 1rem;
color: #ffb900;
}
span.wpcf7-radio .wpcf7-list-item, 
span.wpcf7-checkbox .wpcf7-list-item {
display: block;
margin: 0;
}
@media (min-width: 481px) {
span.wpcf7-radio .wpcf7-list-item, 
span.wpcf7-checkbox .wpcf7-list-item {
display: inline-block;
margin: 7px 20px 7px 1em;
}
}
.wpcf7-acceptance span.wpcf7-list-item {
margin: 7px 0 7px 1em;
}
div.wpcf7 img.ajax-loader {
border: none;
vertical-align: middle;
margin: 1rem auto;
width: auto;
max-width: 100%;
height: auto;
} .breadcrumb {
display: block;
width: 100%;
height: auto;
padding: 25px 3% 0 3%;
}
.breadcrumb ul {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.breadcrumb ul li {
display: -webkit-flex;
display: flex;
font-size: 12px;
line-height: 1.25em;
margin: 3px;
}
.breadcrumb ul li:before {
font-family: FontAwesome;
line-height: 1.1em;
content: "\f105";
margin: 0 5px 0 0;
}
.breadcrumb ul li:first-of-type:before {
content: none;
margin: 0;
}
.breadcrumb ul li a {
color: #222;
text-decoration: none;
}
.breadcrumb ul li a:hover {
color: #222;
text-decoration: underline;
} #fancybox-content > div > div#inline-rentacar {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#inline-rentacar {
display: block;
width: 100%;
max-width: 960px;
height: auto;
padding: 15px;
margin: 0 auto;
background-color: #333;
}
@media (min-width: 769px) {
#inline-rentacar {
padding: 20px;
}
}
#inline-rentacar h2.toptxt {
font-size: 18px;
line-height: 1.6em;
font-weight: bold;
color: #b6b6b6;
text-align: center;
margin-bottom: 10px;
}
@media (min-width: 481px) {
#inline-rentacar h2.toptxt {
font-size: 24px;
}
}
@media (min-width: 769px) {
#inline-rentacar h2.toptxt {
margin-bottom: 20px;
}
}
ul.rentacar-wrap {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
ul.rentacar-wrap li {
display: block;
width: 100%;
height: auto;
padding: 0;
margin: 10px 0;
background: #454545;
}
@media (min-width: 481px) {
ul.rentacar-wrap li {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media (min-width: 769px) {
ul.rentacar-wrap li {
display: block;
width: calc( 33.33% - 2px );
margin: 1px;
}
}
@media (min-width: 1025px) {
ul.rentacar-wrap li {
display: block;
width: calc( 25% - 2px );
margin: 1px;
}
}
ul.rentacar-wrap li .rentacar-img {
display: block;
width: 100%;
height: auto;
background-color: #fff;
}
@media (min-width: 481px) {
ul.rentacar-wrap li .rentacar-img {
width: 50%;
}
}
@media (min-width: 769px) {
ul.rentacar-wrap li .rentacar-img {
width: 100%;
}
}
ul.rentacar-wrap li .rentacar-info {
display: block;
width: 100%;
height: auto;
padding: 20px;
margin: 0;
}
@media (min-width: 481px) {
ul.rentacar-wrap li .rentacar-info {
width: 50%;
}
}
@media (min-width: 769px) {
ul.rentacar-wrap li .rentacar-info {
width: 100%;
}
}
ul.rentacar-wrap li .rentacar-info h2 {
font-size: 12px;
font-weight: 400;
line-height: 1.4em;
text-align: left;
color: #e7e7e7;
margin-bottom: 3px;
}
ul.rentacar-wrap li .rentacar-info h3 {
font-size: 16px;
font-weight: 700;
line-height: 1.4em;
text-align: left;
color: #fff;
margin-bottom: 10px;
}
ul.rentacar-wrap li .rentacar-info h4 {
font-size: 14px;
font-weight: 400;
line-height: 1.4em;
text-align: left;
color: #ccc;
margin-bottom: 10px;
}
ul.rentacar-wrap dl {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
ul.rentacar-wrap dl dt {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-content: center;
align-content: center;
width: 60px;
height: auto;
font-size: 16px;
font-weight: 400;
line-height: 1.4em;
text-align: center;
padding: 5px;
margin: 0 0 1px 0;
color: #fff;
border-bottom: 1px solid #222;
background-color: #222;
}
@media (min-width: 769px) {
ul.rentacar-wrap dl dt {
width: 80px;
}
}
ul.rentacar-wrap dl dd {
display: block;
width: calc( 100% - 60px );
height: auto;
font-size: 16px;
font-weight: 700;
line-height: 1.4em;
text-align: right;
padding: 5px;
margin: 0;
color: #fff;
border-bottom: 1px dotted #ccc;
}
@media (min-width: 769px) {
ul.rentacar-wrap dl dd {
width: calc( 100% - 80px );
}
} #slidemm .cycle-prev {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-content: center;
align-content: center;
width: 30px;
height: 30px;
background: rgba(255,255,255,0.6);
cursor: pointer;
position: absolute;
z-index: 10001;
top: calc( 50% - 15px - 15px );
left: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media (min-width: 481px) {
#slidemm .cycle-prev {
width: 40px;
height: 40px;
top: calc( 50% - 20px - 15px );
}
}
@media (min-width: 769px) {
#slidemm .cycle-prev {
width: 50px;
height: 50px;
top: calc( 50% - 25px - 15px );
}
}
#slidemm .cycle-prev:hover {
background: rgba(255,255,255,0.8);
}
#slidemm .cycle-prev:before {
display: inline-block;
width: auto;
height: auto;
content: "\f104";
font-family: "FontAwesome";
font-size: 30px;
line-height: 1em;
color: rgba(0,0,0,0.5);
padding-right: 3px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media (min-width: 481px) {
#slidemm .cycle-prev:before {
font-size: 40px;
padding-right: 4px;
}
}
@media (min-width: 769px) {
#slidemm .cycle-prev:before {
font-size: 50px;
padding-right: 5px;
}
}
#slidemm .cycle-prev:hover:before {
color: rgba(225,0,0,0.8);
}
#slidemm .cycle-next {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-content: center;
align-content: center;
width: 30px;
height: 30px;
background: rgba(255,255,255,0.6);
cursor: pointer;
position: absolute;
z-index: 10001;
top: calc( 50% - 15px - 15px );
right: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media (min-width: 481px) {
#slidemm .cycle-next {
width: 40px;
height: 40px;
top: calc( 50% - 20px - 15px );
}
}
@media (min-width: 769px) {
#slidemm .cycle-next {
width: 50px;
height: 50px;
top: calc( 50% - 25px - 15px );
}
}
#slidemm .cycle-next:hover {
background: rgba(255,255,255,0.8);
}
#slidemm .cycle-next:before {
display: inline-block;
width: auto;
height: auto;
content: "\f105";
font-family: "FontAwesome";
font-size: 30px;
line-height: 1em;
color: rgba(0,0,0,0.5);
padding-left: 3px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media (min-width: 481px) {
#slidemm .cycle-next:before {
font-size: 40px;
padding-left: 4px;
}
}
@media (min-width: 769px) {
#slidemm .cycle-next:before {
font-size: 50px;
padding-left: 5px;
}
}
#slidemm .cycle-next:hover:before {
color: rgba(225,0,0,0.8);
}
#slidemm .cycle-pager {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-content: center;
align-content: center;
width: 100%;
height: auto;
padding: 5px;
position: relative;
z-index: 10001;
}
#slidemm .cycle-pager span {
display: block;
width: 16px;
height: 16px;
margin: 5px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border: 2px solid #fff;
background: transparent;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
cursor: pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#slidemm .cycle-pager span:hover {
background: rgba(225,0,0,0.8);
}
#slidemm .cycle-pager span.cycle-pager-active, 
#slidemm .cycle-pager span.cycle-pager-active:hover {
background: #fff;
}
section.banner {
width: 100%;
padding: 50px 5%;
text-align: center;
background: #000;
}
.banner ul li{
float: left;
width: 33.3333333333%;
padding: 10px;
}
@media screen and (max-width: 1100px) {
.banner ul li{
float: none;
width: 100%;
padding: 10px;
}
}
.main-t{
padding: 0px;
}
.main-t h1{
}
.main-t p{
text-align: center;
font-size: 22px;
line-height: 1.8;
padding-top: 30px;
}
.stock-t{
text-align: center;
font-size: 18px;
margin-bottom: 30px;
padding: 0 20px;
}
@media screen and (min-width: 768px) {
.pc-none{
display: none;
}
}
@media screen and (max-width: 768px) {
.sp-none{
display: none;
}
.stock-tab a {
margin: 0 2px;
font-size: 12px;
}
.main-t h1{
}
.main-t p{
text-align: center;
font-size: 15px;
padding: 0 20px;
padding-top: 20px;
}
.stock-t{
text-align: center;
font-size: 14px;
}
}
.g-tag{
background: #000;
width: 100%;
padding: 10px;
font-size: 16px;
}