@charset "UTF-8";

/*!
Theme Name: Karada Genki
Description: Cocoon専用の子テーマ
Theme URI: https://ekaki-j.com/
Author: J.
Author URI: https://ekaki-j.com/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*###### 定義 ######*/
:root {
/* Orange */
--tulip-tree: #e89f3f;
--mikado: #2e200d;
--copper: #ae772f;
/* Green */
--olivine: #8ec86a;
}
/*###### 共通 ######*/
* {
-webkit-tap-highlight-color: transparent; /* 強調をなくす */
}
.clearfix:after {
content:" ";
display:block;
clear:both;
}
/*** grid layout ***/
.grid-container {
display: grid;
gap: 0.25rem;
grid-template-columns: repeat(auto-fit, 1fr);
overflow: hidden;
}
ul.grid-container {
list-style: none;
padding-left: 0;
}
.grid-container .grid-item {
 & a {
 display: flex;
 align-items: center;
 }
display: flex;
align-items: center;
justify-content: center;
}
/* 投稿 */
.grid-container.photo {
grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
justify-content: center;
}
/*** リスト ***/
ul.komelist {
list-style: none;
padding-left: 0;
}
ul.komelist li {
padding-left: .5em;
text-indent: -.5em;
}
ul.komelist li:before {
content: "*";
display: inline;
}
.dl-single-line > dt {
font-weight: bold;
float: left;
clear: left;
margin-right: 0.5em;
}
dl dt {
font-weight: bold;
}
.page dl dl {
margin-bottom: .5em;
}
.dl-inline-block-dd > dd {
display: inline-block;
}
ul.check {
list-style: none;
padding-left: 0;
}
ul.check > li {
text-indent: -1.5em;
padding-left: 1.5em;
}
ul.check > li:before {
content: "\f00c";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-right: .25em;
color: var(--olivine);
}
/*** 本文 ***/
h1.entry-title {
text-align: center;
font-weight: normal;
color: var(--mikado);
font-size: 180%;
position: relative;
border-bottom: solid 3px var(--tulip-tree);
padding-bottom: 0.2em;
 & span {
 display: inline-block;
 margin-left: 1em;
 font-size: 80%;
 }
}
.entry-title:before {
}
.entry-title:after {
content: "";
position: absolute;
border-bottom: solid 8px var(--olivine);
bottom: -8px;
left: 0;
right: 0;
margin: auto;
width: 30%;
}
.entry-content h2 {
border-bottom: solid 3px var(--olivine);
position: relative;
font-size: 150%;
font-weight: normal;
padding-bottom: 0.2em;
background: none;
 & span {
 display: inline-block;
 }
}
.entry-content h2:after {
position: absolute;
content: "";
border-bottom: solid 6px var(--tulip-tree);
bottom: -6px;
left: 0;
width: 30%;
}
.entry-content {
 & h2,
 & h3 {
  & i.fas {
  margin-right: .5em;
  }
 }
}
.entry-content h3 {
font-weight: normal;
display: flex;
align-items: center;
justify-content: left;
border: none;
padding: 0;
font-size: 130%;
}
.entry-content h3:before {
}
.entry-content h3:after {
content: "";
height: 1px;
flex-grow: 1;
background-color: var(--olivine);
margin-left: .25em;
max-width: 50%;
}
.custom-html-widget h2 {
font-weight: normal;
display: flex;
align-items: center;
justify-content: left;
border: none;
padding: 0;
font-size: 130%;
}
.custom-html-widget h2:after {
content: "";
height: 1px;
flex-grow: 1;
background-color: var(--olivine);
margin-left: .25em;
max-width: 50%;
}
.entry-content h4 {
font-weight: normal;
display: flex;
align-items: center;
justify-content: left;
border-top: 1px solid var(--olivine);
border-bottom: 1px solid var(--olivine);
}
.entry-content h5 {
font-weight: normal;
border: none;
border-left: 5px solid var(--olivine);
padding: 0;
padding-left: .5em;
}
.clearfix.large-photo > img,
.clearfix.large-photo > a img,
.clearfix.large-photo > p img,
.clearfix.large-photo > figure {
max-width: 50%;
height: auto;
}
.clearfix.large-photo img {
}
/*###### ページリンクボタン ######*/
div.request-wrap {
display: flex;
flex-direction: column;
align-items: center;
font-size: 200%;
margin-top: 1em;
margin-bottom: 1em;
}
a.page-link-btn {
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
border-radius: 40px;
font-size: 1.5rem;
padding: 1.5rem 3rem 1.5rem 2rem;
}
a.page-link-btn.page-link {
color: #fff;
/*background-color: #1e73be;*/
background-color: var(--tulip-tree);
}
a.page-link-btn.contact {
color: #fff;
background-color: var(--tulip-tree);
}
a.page-link-btn.page-link:hover {
/*background: #29a2d4;*/
background-color: var(--olivine);
}
a.page-link-btn.contact:hover {
background: var(--olivine);
}
a.page-link-btn i.fa,
a.page-link-btn i.fas {
margin-right: 1rem;
}
a.page-link-btn:before {
font-family: 'Font Awesome 5 Free';
font-size: 1.6rem;
line-height: 1;
position: absolute;
top: calc(50% - .8rem);
right: 1rem;
margin: 0;
padding: 0;
content: '\f054';
}
/*###### アピールエリア ######*/
.appeal {
/*background-size: cover;*/
/*background-size: contain;*/
/*background-position: center;*/
}
#appeal {
height:calc(100vw * 0.3);
position: relative;
overflow: hidden;
}
#appeal-in:after {
/*content: "";
width: 100%;
height: 150px;
background-image: url(img/appeal-after.png);
background-size: 100% auto;
background-position: center bottom;
background-repeat: no-repeat;
position: absolute;
left: 0;
right: 0;
bottom: -1px;*/
}
.appeal-content {
background-color: transparent;
margin-top: -20px;
}
.appeal-content .appeal-title {
font-weight: 500;
line-height: 150%;
text-shadow: -1px 1px 2px rgba(255,255,255,1.0),
             1px 1px 2px rgba(255,255,255,1.0),
             1px -1px 2px rgba(255,255,255,1.0),
             -1px -1px 2px rgba(255,255,255,1.0),
             -4px 0px 4px rgba(255,255,255,0.7),
             0px 4px 4px rgba(255,255,255,0.7),
             4px 0px 4px rgba(255,255,255,0.7),
             0px -4px 4px rgba(255,255,255,0.7);
opacity: 0;
animation: appealFalling 1.5s ease 0.5s alternate forwards;
}
.appeal-content .appeal-message {
font-weight: bold;
line-height: 150%;
text-shadow: -1px 1px 2px rgba(255,255,255,1.0),
             1px 1px 2px rgba(255,255,255,1.0),
             1px -1px 2px rgba(255,255,255,1.0),
             -1px -1px 2px rgba(255,255,255,1.0),
             -4px 0px 4px rgba(255,255,255,0.7),
             0px 4px 4px rgba(255,255,255,0.7),
             4px 0px 4px rgba(255,255,255,0.7),
             0px -4px 4px rgba(255,255,255,0.7);
opacity: 0;
animation: appealRising 1.5s ease 1.0s alternate forwards;
}
/*###### 会社概要 ######*/
.about .entry-content .fa,
.about .entry-content .fas {
margin-right: 0.5em;
}
.about dl {
 & dd {
 line-height: 150%;
  & span {
  display: inline-block;
  margin: 0;
  margin-right: .5em;
  }
 }
 & dt {
 line-height: 150%;
 }
}
.about dl:not(.dl-single-line):not(.dl-inline-block-dd) > dd {
margin-left: 0;
}
.about dl.dl-inline-block-dd > dd {
margin-left: 0;
margin-right: 1.5em;
margin-bottom: .5em;
}
.about dl.dl-inline-block-dd > dd:not(:last-child) {
margin-bottom: 0;
}
.about dl:not(.dl-single-line):not(.dl-inline-block-dd) > dt:not(:first-child) {
margin-top: 1.5em;
}
.about .dl-single-line > dt {
width: 5.0em;
/*text-align: right;*/
}
.about .dl-single-line dd {
margin-left: 5.5em;
margin-bottom: .5em;
}
.about dd .flex-container {
justify-content: flex-start;
}
.about dd .flex-container .flex-item {
margin-top: 0;
}
.about dd ul li {
margin-left: 0;
}
.about dd .flex-container .flex-item:not(:last-child) {
margin-right: 1em;
}
.about dd p {
margin-bottom: 0;
}
/*###### 問い合せフォーム ######*/
dl#Inquiry dt {
clear: left;
float: left;
width: 11em;
text-align: right;
font-weight: bold;
}
dl#Inquiry.vi dt {
width: 13em;
}
dl#Inquiry dd {
margin-left: 11.5em;
margin-bottom: 20px;
}
dl#Inquiry.vi dd {
margin-left: 13.5em;
}
dl.inquiry dt {
clear: left;
float: left;
width: 11em;
text-align: right;
font-weight: bold;
}
dl.inquiry dd {
margin-left: 11.5em;
margin-bottom: 20px;
}
dl#Inquiry dd.before-interpretation,
dl.inquiry dd.before-interpretation {
text-align: right;
}
p.submit,
p.send_button {
width: 10em;
margin-left: auto;
margin-right: auto;
}

p.submit input[type="submit"].wpcf7-submit,
p.send_button input[type="submit"].wpcf7-submit {
border-radius: 40px;
border: none;
font-weight: bold;
font-size: 100%;
background: var(--tulip-tree);
box-shadow: 0 3px 1px var(--copper);
color: #fff;
transition: 0.3s;
padding: 1em;
}
p.submit input[type="submit"].wpcf7-submit:before,
p.send_button input[type="submit"].wpcf7-submit:before {
font-family: "Font Awesome 5 Free";
content: "\f0e0";
font-weight: 900;
}
p.submit input[type="submit"].wpcf7-submit:hover,
p.send_button input[type="submit"].wpcf7-submit:hover {
/*background: rgba(74,186,0,0.7);*/
background: var(--tulip-tree);
box-shadow: 0 -3px 1px var(--copper);
transform: translateY(3px);
}
p.submit input[type="submit"].wpcf7-submit:focus,
p.send_button input[type="submit"].wpcf7-submit:focus {
outline: 0;
background: var(--tulip-tree);
}
dl#Inquiry b,
dl.inquiry b {
color: red;
}
dl#Inquiry input:focus,
dl#Inquiry textarea:focus,
dl.inquiry input:focus,
dl.inquiry textarea:focus {
/*border: 1px solid #005bab;
outline: 0;*/
outline-color: var(--tulip-tree);
}
.tel-num.big.center {
/*text-align: center;
font-size: 200%;
font-weight: bold;
color: #4aba00;*/
}
.contact .tel-num span {
display: inline-block;
}
.contact .tel-num i.fa {
margin-right: .5em;
}
.contact p > span {
display: inline-block;
}
.contact p > span:not(:last-child) {
margin-right: .5em;
}
/*###### プライバシーポリシー ######*/
.page.privacy-policy dl dt,
.page.tokushoho dl dt {
font-weight: bold;
}
dd.mail-form-dd input[name="e1"] {
width: 3em;
margin-bottom: 10px;
}
dd.mail-form-dd input[name="e2"] {
width: 10em;
margin-bottom: 10px;
}
dd.mail-form-dd input[type="button"] {
border-radius: 40px;
border: none;
background: var(--tulip-tree);
box-shadow: 0 3px 1px var(--copper);
color: #fff;
transition: all 0.3s;
padding: .5em 1em;
cursor: pointer;
/*margin-top: 20px;*/
}
dd.mail-form-dd input[type="button"]:hover {
/*background: #db3552;*/
/*box-shadow: 0 -3px 1px #aa003e;*/
}
dd.mail-form-dd input[type="button"]:focus {
outline: 0;
background: var(--tulip-tree);
box-shadow: 0 -3px 1px var(--copper);
transform: translateY(3px);
}
dl.mail-form-dl dt {
clear: left;
float: left;
width: 8em;
}
dl.mail-form-dl.vi dt {
width: 16em;
}
dl.mail-form-dl dd {
margin-left: 8.5em;
margin-bottom: 1em;
}
dl.mail-form-dl.vi dd {
margin-left: 16.5em;
}
/*###### reCAPTCHA v3 表示 ######*/
.grecaptcha-badge {
margin-bottom: 60px;
}
/*###### 非表示項目 ######*/
.page .date-tags {
display: none;
}
.contact .sns-share,
.contact .sns-follow,
.privacy-policy .sns-share,
.privacy-policy .sns-follow {
display: none;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*###### 共通 ######*/
 .entry-content img.alignleft,
 .entry-content img.alignright,
 .item-caption img.alignleft,
 .item-caption img.alignright,
 figure.alignleft,
 figure.alignright,
 .wp-block-image.alignleft,
 .wp-block-image.alignright {
 float: none;
 display: block;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 20px;
 width: 100%;
 }
 .clearfix.large-photo > img,
  .clearfix.large-photo > a img,
 .clearfix.large-photo > p img,
 .clearfix.large-photo > .wp-block-image {
 max-width: 90%;
 }
}