/*
Theme Name: OGJ
Theme URI: https://adnacom.jp/
Author: adnacom
Author URI: https://adnacom.jp/
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* 基本設定 */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 62.5%; /* sets the base font to 10px for easier math フォントサイズ指定はrem */
  font-family: 'Hiragino Kaku Gothic ProN', 'メイリオ', meiryo, '游ゴシック Medium', 'Helvetica Neue', sans-serif;
}
body {
  color: #333333;
  font-size: 1.4rem;
  padding-top: 20px;
}
a {
  color: #333333;
  text-decoration: none;
}
a:hover {
  color: #31B3CD;
  text-decoration: none;
}
li {
  list-style-type: none;
}
img.aligncenter {
  display: block;
  margin: 5px auto 40px;
}
img.alignright {
  margin: 0 0 25px 25px;
  float: right;
}
img.alignleft {
  margin: 0 25px 25px 0;
  float: left;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
/* wrapper　*/
#wrapper, .footerWrapper ul, small {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
#wrapper {
  position: relative;
}
#wrapper::after {
  content: "";
  display: block;
  clear: both;
}
/*　ヘッダー　*/
header {
  margin-bottom: 40px;
}
h1 {
  width: 300px;
}
h1 img, #login img {
  width: 100%;
  height: auto;
}
#login {
  position: absolute;
  right: 0;
  top: 0;
}
#login .loginBtm {
  width: 140px;
  display: inline-block;
}
#login .entryBtm {
  width: 160px;
  display: inline-block;
}
/*　slider　*/
.bx-wrapper {
  margin-bottom: 30px;
}
/*　main　*/
main {
  width: calc( 100% - 330px );
  float: right;
}
main p {
  margin-bottom: 1em;
  line-height: 2;
  word-wrap: break-word;
}
main img {
  max-width: 100%;
  height: auto;
}
main h2, main h3 {
  font-size: 1.4rem;
  font-weight: normal;
}
main h2 {
  margin-bottom: 1em;
}
main h2.text_page_title {
  color: #31B3CD;
  font-size: 1.8rem;
}
main h2.text_page_title:not(:nth-of-type(1)) {
 margin-top: 2em;
}
main h2 span {
  font-size: 1.12rem;
  padding-left: 1em;
  color: #999999;
  letter-spacing: 0.1em;
}
main a:hover img, #login a:hover img {
  opacity: 0.8;
}
main h3 {
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 1em;
}
main ul.topics, main ul.service {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  margin-bottom: 40px;
}
main ul.topics li, main ul.service li {
  -webkit-flex-basis: 30%; /* Safari */
  flex-basis: 30%;
  padding-bottom: 1em;
}
main ul.topics li:not(:nth-child(3n)), main ul.service li:not(:nth-child(3n)) {
margin-right: 5%
}
main dl {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  margin-left: 10px;
  margin-bottom: 20px;
}
main dl dt {
  -webkit-flex-basis: 8em; /* Safari */
  flex-basis: 8em;
  margin-bottom: 0.8em;
}
main dl dd {
  -webkit-flex-basis: calc( 100% - 8em ); /* Safari */
  flex-basis: calc( 100% - 8em );
  margin-bottom: 0.8em;
}
main .youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
main .youtube {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0px;
  position: relative;
  margin-bottom: 20px;
}
main .visualeditor a {
  text-decoration: underline;
  color: #31B3CD;
}
main .visualeditor a:hover {
  color: #195D6A;
}
main ul#howtocare {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  margin-bottom: 20px;
}
main ul#howtocare > li {
  -webkit-flex-basis: 46%; /* Safari */
  flex-basis: 46%;
  margin-bottom: 20px;
}
main ul#howtocare > li:nth-child(odd) {
  margin-right: 8%;
}
main ul#howtocare .fa-square {
  font-size: 80%;
  color: #31B3CD;
}
main .specialservice h3 {
  font-size: 1.2rem;
  text-align: left;
}
main .flexibleButton {
  margin-bottom: 1em;
}
main .flexibleButton a {
  padding: 0.8em 2.8em;
  color: #FFFFFF;
  font-size: 1.8rem;
  display: inline-block;
}
main .flexibleButton a:hover {
  color: #FFFFFF;
  opacity: 0.8;
}
/*　サイドバー　*/
aside ul li ul li:before {
  content: ">";
  
}
aside ul li {
  margin-bottom: 1em;
}
aside ul li ul li:first-child {
  margin-top: 1em;
}
aside ul li ul li:last-child {
  margin-bottom: 2em;
}
aside ul li ul li {
  padding-left: 2em;
}
aside ul li span {
  font-size: 1.12rem;
  padding-left: 1em;
  color: #999999;
  letter-spacing: 0.1em;
}
/*　フッター　*/
footer {
  clear: both;
}
footer ul {
}
footer ul li {
  float: left;
  margin-right: 2em;
}
.footerWrapper {
  border-bottom: 1px solid #E6E6E6;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}
small {
  display: block;
  margin-bottom: 1em;
}
/* ログイン */
/* モーダル コンテンツエリア */
#modal-main {
  display: none;
  width: 90%;
  max-width: 500px;
  height: 380px;
  margin: 0;
  padding: 20px;
  background-color: #ffffff;
  color: #666666;
  position: fixed;
  z-index: 10002;
}
/* モーダル 背景エリア */
#modal-bg {
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;
}
/* フォーム */
#mailFormWrapper {
  clear: both;
  background-color: #E6E6E6;
  padding-top: 70px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
}
#mailFormWrapper h2, #mailFormWrapper form,#mailFormWrapper #mfp_phase_confirm {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 330px;
}
#mailFormWrapper h2 {
  color: #31B3CD;
  font-size: 1.8rem;
  font-weight: normal;
  margin-bottom: 20px;
}
#mailFormWrapper p{
  font-size: 1.2rem;
  margin-top: 0.8em;
}
#mailFormWrapper input, #mailFormWrapper textarea {
  padding: 0.8em;
  background-color: #FFFFFF;
  width: 100%!important;
  margin-bottom: 0.5em;
}
#mailFormWrapper select{
  padding: 0.5em;
  background-color: #FFFFFF;
}
#mailFormWrapper .name {
}
#mailFormWrapper .name input {
  width: 48%!important;
}
#mailFormWrapper .name input:first-child {
  margin-right: 4%;
}
#mailFormWrapper input[type="radio"],#mailFormWrapper input[type="checkbox"] {
  width: auto!important;
}
#mailFormWrapper label{
  width: 100%;
  padding: 1em;
  display: block;
  margin-bottom: 1em;
  border: thin solid #C7C7C7;
}
#mailFormWrapper label.mfp_checked{
  background-color: #D3D3D3;
}
#mailFormWrapper input.zipcode {
  width: 10em!important;
}
#mailFormWrapper dl {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
}
#mailFormWrapper dl dt, #mailFormWrapper dl dd {
  margin-bottom: 2em;
}
#mailFormWrapper dl dt {
  -webkit-flex-basis: 14em; /* Safari */
  flex-basis: 14em;
  padding-right: 1em;
}
#mailFormWrapper dl dd {
  -webkit-flex-basis: calc( 100% - 14em ); /* Safari */
  flex-basis: calc( 100% - 14em );
}
#mailFormWrapper dl dd ol li {
  margin-bottom: 1em;
}
#mailFormWrapper .must{
  color: #31B3CD;
  padding-left: 1em;
}
#mailFormWrapper .mfp_err{
  color: #A30063;
  /*margin-top: 0.5em;*/
}
#mailFormWrapper .mfp_buttons button {
  padding: 0.8em 2.8em;
  color: #FFFFFF;
  font-size: 1.8rem;
  display: inline-block;background-color: #31B3CD;
}
#mailFormWrapper .mfp_buttons button:hover {
  color: #FFFFFF;
  opacity: 0.8;
}
#mailFormWrapper #mfp_phase_confirm h4{
  font-size: 1.8rem;
  margin-bottom: 20px;
}
#mailFormWrapper table,#mailFormWrapper #mfp_phase_confirm tr {
  width: 100%;
}
#mailFormWrapper #mfp_phase_confirm tr{margin-bottom: 1em;}
#mailFormWrapper #mfp_phase_confirm th,#mailFormWrapper #mfp_phase_confirm td {
  display: block;
  text-align: left;
  margin-bottom: 1em;  padding: 0.5em;

}
#mailFormWrapper #mfp_phase_confirm th{
  background-color: #D3D3D3;
}
#mailFormWrapper input:disabled{
  background-color: #E0E0E0;
}
#mailFormWrapper .formTxt{
  margin-bottom: 40px;
  font-size: 1.6rem;
}
#mailFormWrapper .formTit{
  margin-bottom: 20px;
  font-size: 1.8rem;
}

/* ログインフォーム */
#loginform {
}
#loginform .login-username input,#loginform .login-password input {
  padding: 0.5em 1em;
  border: thin solid #808080;
  font-size: 1.6rem;
  max-width: 220px;
}
#loginform .login-username label,#loginform .login-password label {
  margin-right: 40px;
}
#loginform .login-submit input{
    padding: 0.5em 2.8em;
    color: #FFFFFF;
    font-size: 1.8rem;
    display: inline-block;    background-color: #31B3CD;
}
#loginform .login-submit input:hover {
  opacity: 0.8;
}
#modal-main #loginform {
  text-align: center;
}
#modal-main h2{
  text-align: center;
  color: #31B3CD;
  font-size: 2rem;
  font-weight: normal;
  margin-bottom: 20px;
}
#modal-main #loginform p{  margin-bottom: 20px;

}
#modal-main .modalLoginTxt{
  font-size: 1.2rem;
}
#modal-main .modalLoginTxt a{
  color: #31B3CD;
}
#modal-main .modalLoginTxt a:hover{
  text-decoration: underline;
}

@media (min-width:769px) {/*　ipadより広い　*/
.pc_hide {
  display: none;
}
aside {
  width: 330px;
  float: left;
}
}

@media (max-width:960px) {
body {
  padding-left: 20px;
  padding-right: 20px;
}
}

@media (max-width:768px) {/*　ipadより狭い　*/
body {
  padding-top: 0;
}
.sp_hide {
  display: none;
}
header {
  background-color: #FFFFFF;
  height: 80px;
  position: fixed;
  width: 100%;
  z-index: 9997;
}
h1 {
  width: 160px;
  margin-top: 20px;
}
#login {
  right: 90px;
  position: absolute;
  top: 20px;
}
#login .loginBtm, #login .entryBtm {
  width: 40px;
  display: inline-block;
}
main {
  width: 100%;
  float: none;
  padding-top: 100px;
}
main .topHeaderImg {
  width: 80%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}
main .flexibleButton {
  text-align: center;
}
#rwdMenuWrap .spMenuTit {
  position: relative;
  width: 100%;
  height: 140px;
  text-align: center;
  margin-top: 0;
}
#rwdMenuWrap .spMenuTit img:nth-child(1) {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 160px;
  height: auto;
}
#rwdMenuWrap .spMenuTit img:nth-child(2) {
  position: absolute;
  top: 70px;
  left: calc( 100% / 2 - 250px / 2 );
  width: 250px;
  height: auto;
  margin-right: auto;
  margin-left: auto;
}
#rwdMenuWrap > ul {
  padding-left: 20px;
  padding-right: 20px;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
}
#rwdMenuWrap > ul > li {
  -webkit-flex-basis: 50%; /* Safari */
  flex-basis: 50%;
}
#rwdMenuWrap > ul > li:last-child {
  -webkit-flex-basis: 100%; /* Safari */
  flex-basis: 100%;
}
#rwdMenuWrap ul li ul li:before {
  content: "\003E\00a0";
}
#rwdMenuWrap ul li {
  margin-bottom: 1em;
}
#rwdMenuWrap ul li ul li:first-child {
  margin-top: 1em;
}
#rwdMenuWrap ul li ul li:last-child {
  margin-bottom: 2em;
}
#rwdMenuWrap ul li ul li {
  padding-left: 0;
}
#rwdMenuWrap ul li span {
  display: none;
}
#rwdMenuWrap + #wrapper h1 {
/*display: none;*/
}
#mailFormWrapper h2, #mailFormWrapper form,#mailFormWrapper #mfp_phase_confirm {
  padding-left: 0;
}
#mailFormWrapper{
  padding: 1em;
}

/* お手入れページ・給気口ページのQRカスタム
-----------------------------------------*/
.postid-1475 .visualeditor img, .postid-1460 .visualeditor img{
  display: none;
}


}

@media (max-width:414px) {/*　iphoneより狭い　*/
main ul.topics li, main ul.service li {
  -webkit-flex-basis: 48%; /* Safari */
  flex-basis: 48%;
  padding-bottom: 1em;
}
 main ul.topics li:not(:nth-child(3n)), main ul.service li:not(:nth-child(3n)) {
margin-right: 0
}
 main ul.topics li:not(:nth-child(2n)), main ul.service li:not(:nth-child(2n)) {
margin-right: 4%
}
main ul#howtocare > li {
  -webkit-flex-basis: 100%; /* Safari */
  flex-basis: 100%;
  margin-bottom: 20px;
}
main ul#howtocare > li:nth-child(odd) {
  margin-right: 0;
}
  #mailFormWrapper dl {
  display: block;
}
  #mailFormWrapper dl dt{
  font-weight: bold;margin-bottom: 1em;
}
  #mailFormWrapper .mfp_buttons button {
  display: block;
  width: 100%;
}
  #modal-main {
    height: 450px;
}
  #loginform .login-username label,#loginform .login-password label {
  margin-right: 0;
  margin-bottom: 10px;
  display: block;
}
  #loginform p {
  text-align: center;
}
}
/* フレキシブルコンテンツ
------------------------------------------------------------*/
.twocolumn {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
  margin-bottom: 1em;
}
.twocolumn div {
  width: 48%;
  text-align: center;
}
.threecolumn {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
  margin-bottom: 1em;
}
.threecolumn div {
  width: 30.5%;
  text-align: center;
}


#satori__creative_container .satori__show{
  display: block!important;
}