@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.2
*/

/************************************
** header
************************************/
html {
  scroll-behavior: smooth;
}
.sp{
  display: none;
}
.navi {
  padding: 16px 0 0 0;
  font-family:Hiragino Sans;
  font-weight: 200;
}
.logo-image {
  padding: 30px 0 0 0;
  font-size: inherit;
}
.navi-in > ul li {
  width: auto;
}
.navi-in a {
  padding: 0 16px;
  font-size: 18px;
}
.tagline {
  font-size: 28px;
  font-family: 'Shippori Mincho B1', serif;
  font-weight: normal;
  margin: 0 0 36px 0;
}
.mobile-header-menu-buttons {
  min-width: 60px;
  z-index: 3;
  box-shadow: none;
}
.navi-menu-button {
  margin: 0 0 0 auto; 
}
.search-menu-button{
  display: none;
}
.logo-menu-button{
  display: none;
}
.mobile-menu-buttons .menu-caption {
  display: none;
}
.navi-menu-icon.menu-icon{
  font-size: 42px;
}
.header-margin{
  width: 100%;
  height: 500px;
  position: absolute;
  top: -430px;
  left: 0;
  background-color: #ffffff;
}
.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}
.menu-close-button {
  font-size: 2.4em;
  width: 60px;
  height: 60px;
  margin: 0 0 0 auto;
}
@media screen and (max-width: 1023px){
  .navi-in a {
    font-size: 14px;
  }
  .mobile-menu-buttons {
    display: none;
  }
  .scrollable-mobile-buttons {
    margin-top: 0;
}
}
@media screen and (max-width: 834px){
  .sp{
    display: block;
  }
  .navi {
    padding: 0;
  }
  #navi-menu-content img{
    width: 200px;
    margin: 0 0 16px 16px;
  }
  .menu-drawer a {
    margin: 0 0 16px;
    border-left: 4px solid #5F5D00;
  }
  .menu-content .menu-drawer {
    padding: 0 0 30px 1em;
  }
  .logo-image {
    padding: 16px 0 0 0;
  }
  .mobile-menu-buttons {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }
  .scrollable-mobile-buttons {
    margin-top: 60px;
  }
  .logo-image a {
    max-width: 70%;
  }
  .tagline {
    font-size: 24px;
    width: 80%;
    margin: 0 auto 36px auto;
  }
}
@media screen and (max-width: 480px){
  .tagline {
    font-size: 21px;
  }
}

/************************************
** footer
************************************/
.footer {
  margin: 0 0 24px 0;
  padding: 0;
}

/************************************
** 404
************************************/
.not-found {
  max-width: 500px;
  width: 90%;
}
.error404 .post.article{
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  padding: 0 0 60px 0;
}
/************************************
** お問い合わせ
************************************/
#post-19,#post-30 {
  width: 100%;
  max-width: 834px;
  padding: 0 16px 32px 16px;
  margin: 0 auto;
  background-color: #ffffff;
  font-family: 'Shippori Mincho B1', serif;
}
#post-19 .entry-title,#post-30 .entry-title{
  font-size: 26px;
    letter-spacing: 1px;
    font-weight: normal;
    border-bottom: 1px solid #5F5D00;
    padding: 0 0 8px 0;
    margin: 0 0 24px 0;
    text-align: center;
}
#post-19 .entry-content,#post-30 .entry-content {
  margin: 0 0 48px 0;
}
.wp-block-contact-form-7-contact-form-selector{
  margin: 0;
}
.wpcf7-form p{
  padding: 0 0 16px 0;
  font-size: 18px;
  margin: 0;
}
.wpcf7-form p:last-of-type{
  width: 100%;
  display: flex;
  flex-flow: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}
.from_your-submit{
  display:flex;
  flex-flow: wrap;
  align-items: center;
  justify-self: center;
}
.wpcf7-form h4{
  padding: 16px 0 8px 0;
  margin: 0;
  font-weight: normal;
  font-size: 24px;
  border: none;
  text-align: left;
}
.wpcf7-form p.from_your-message{
  align-items: flex-start;
}
.wpcf7-form label.contact_day{
  width: calc(100% - 200px);
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  justify-content: center;
}
.wpcf7-form label.label_time{
  width: 184px;
  margin: 0 0 0 16px;
}
.wpcf7-form-control.wpcf7-text{
  width: 100%;
  max-width: 650px;
  font-size: 16px;
  padding: 8px;
  height: 55px;
}
.wpcf7-form-control.wpcf7-date{
  width: 100%;
  max-width: 240px;
  font-size: 16px;
  padding: 8px;
  height: 55px;
}
.wpcf7-form-control.wpcf7-select{
  -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 5px;
	background-color: #ffffff;
  font-size: 18px;
  height: 55px;
  padding: 8px;
  border: 1px solid #ccc;
}
.wpcf7-form-control.wpcf7-select::placeholder {
  color: red;
}
.wpcf7-form-control.wpcf7-select::-ms-expand {
	display: none;
}

.wpcf7-form-control-wrap{
  width: 100%;
  display: flex;
  flex-flow: column;
}
.wpcf7-not-valid-tip{
  font-size: 16px;
  color: #e03b3b;
}
.from_your-area{
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;

}
.from_your-box{
  width: 100%;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
}
.from_your-day{
  display: flex;
  flex-flow: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}
.from_your-day-wrap{
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
}
.from_subhead{
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: flex-start;
  line-height: 1;
}
.inevitable{
  color: #e03b3b;
  border: 1px solid #e03b3b;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 4px 8px;
    border-radius: 3px;
    margin: 0 0 0 8px;
}
.wpcf7-form-control.wpcf7-submit{
  max-width: 500px;
  font-size: 20px;
  padding: 16px;
  margin: 32px auto 0 auto;
}
.grecaptcha-badge{
  display: none;
}
.screen-reader-response{
  display: none;
}
.wpcf7-response-output{
  text-align: center;
}
.sent .from_inner {
  display: none;
}
.complete-display{
  display: none;
}
.sent .complete-display{
  display: block;
}
.sent .wp-block-buttons{
  margin: 0;
}
.sent .wp-block-buttons .wp-block-button{
  margin: 0;
}
@media screen and (max-width: 834px){
  .from_your-day{
    flex-flow: column;
  }
  #post-19 .entry-title {
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: normal;
    border-bottom: 1px solid #5F5D00;
    padding: 0 0 8px 0;
    margin: 0 0 24px 0;
    text-align: left;
  }
  .wpcf7-form p {
    font-size: 16px;
  }
  .wpcf7-form-control.wpcf7-text {
    font-size: 18px;
  }
  .wpcf7-form h4 {
    font-size: 20px;
  }
  .wpcf7-not-valid-tip{
    font-size: 14px;
  }
  .wpcf7-form label.contact_day{
    width: calc(100% - 144px);
  }
  .wpcf7-form label.label_time{
    width: 136px;
    margin: 0 0 0 8px;
  }

}

/************************************
** top　全般
************************************/
.entry-title, .archive-title {
  margin: 0;
}
.l-top_page {
  font-family: 'Shippori Mincho B1', serif;
}
.secondline{
  font-size: 21px;
  font-family: 'Shippori Mincho B1', serif;
  background-color: #D6E1E3;
  text-align: center;
  padding: 16px;
  font-weight: normal;
}
.secondline span{
  display: inline-block;
}
.content {
  margin-top: 0;
}
.no-sidebar .content .main {
  padding: 0;
}
.main {
  width: 100%;
  border: 0;
}
.wrap {
  width: 100%;
  margin: 0 auto;
}
.top_img_area{
  width: 100%;
  position: relative;
}
.top_img_area .top_img{
  width: 100%;
  position: relative;
}
.top_img_area .top_img::before{
  content: "";
  display: block;
  padding-top: 50%;
}
.top_img_area .top_img img{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
}
.banner_img{
  position: absolute;
  bottom: 32px;
  left: 32px;
  max-width: 400px;
  width: 100%;
}
.top_wrap{
  width: 100%;
  padding: 80px 0 96px 0;
}
.grn_back{
  background-color: #D6E1E3;
}
.top_wrap .top_area{
  max-width: 1256px;
  width: 100%;
  margin: auto;
  padding: 0 16px;
}
.top_head{
  font-size: 32px;
  letter-spacing: 1px;
  font-weight: normal;
  border-bottom: 1px solid #5F5D00;
  padding: 0 0 8px 0;
  margin: 0 0 24px 0;
}
.top_head p{
  display: inline-block;
  margin: 0;
  line-height: 1.5;
}
.top_head p:last-of-type{
  color: #5F5D00;
  font-family:Hiragino Sans;
  font-weight: 100;
  letter-spacing: 5px;
}
.top_head p span{
  display: inline-block;
}
.top_subhead{
  font-size: 20px;
  margin: 16px 0 0 0;
}
.top_subhead span{
  display: block;
}
.btn_area{
  width: 100%;
  display: flex!important;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  margin: 32px 0 0 0;
}
.btn_area button,.btn_area a{
  max-width: 560px;
  width: 100%;
  padding: 16px;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  border-radius: 50px;
  color: #ffffff;
  background: #333333;
  text-decoration: none;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
@media screen and (max-width: 1023px){
  .secondline {
    font-size: 20px;
  }
}
@media screen and (max-width: 834px){  
  .top_wrap {
    padding: 60px 0 80px 0;
  }
  .secondline {
    font-size: 18px;
    padding: 16px 8px;
  }
  .top_img_area .top_img::before {
    padding-top: 57.5%;
  }
  .top_head {
    font-size: 30px;
  }
  .top_head p {
    display: block;
  }
  .top_subhead {
    font-size: 18px;
  }
  .btn_area button, .btn_area a {
    font-size: 22px;
  }
  .banner_img{
    position: relative;
    bottom: auto;
    left: auto;
    max-width: 400px;
    width: 100%;
    display: block;
    margin: auto;
    padding: 16px;
  }
}
@media screen and (max-width: 480px){
  .top_wrap {
    padding: 48px 0 60px 0;
  }
  .secondline {
    font-size: 16px;
  }
  .top_img_area .top_img::before {
    padding-top: 66%;
  }
  .top_head {
    font-size: 28px;
  }
  .btn_area button, .btn_area a {
    font-size: 20px;
  }
}
/************************************
** top　ご挨拶
************************************/
.top_message{
  width: 100%;
  display: flex;
  flex-flow: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}
.top_message p{
  width: calc(100% - 320px);
  font-size: 18px;
  padding: 0 0 0 32px;
  margin: 0;
  line-height: 2.4;
  letter-spacing: 0.5px;
}
.top_message p span{
  display: inline-block;
}
.message_img{
  position: relative;
  width: 320px;
}
.message_img::before{
  content: "";
  display: block;
  padding-top: 80%;
}
.message_img img{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
}
@media screen and (max-width: 1023px){
  .top_message p{
    font-size: 16px;
  }

}
@media screen and (max-width: 834px){
  .top_message p{
    width: 100%;
    padding: 16px 0 0 0;
  }
  .message_img {
    width: 100%;
    max-width: 480px;
  }
}
@media screen and (max-width: 480px){

}
/************************************
** top 画像スライダーエリア
************************************/
.top_slider_area{
  width: 100%;
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;
}
.top_slider_img{
  position: relative;
  width: 20%;
  background-color: #000000;
}
.top_slider_img::before{
  content: "";
  display: block;
  padding-top: 100%;
}
.top_slider_img img{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
@media screen and (max-width: 1023px){

}
@media screen and (max-width: 834px){

}
@media screen and (max-width: 480px){

}
/************************************
** top ご提供サービス一覧
************************************/
.top_service{
  width: 100%;
  display: flex;
  flex-flow: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.top_service_box{
  width: calc(33.33% - 32px/3);
  margin: 0 0 32px 0;
}
.top_service_box p{
  font-size: 20px;
  margin: 8px 0 0 0;
}
.top_service_box p span{
  display: inline-block;
}
.top_service_img{
  position: relative;
  width: 100%;
}
.top_service_img::before{
  content: "";
  display: block;
  padding-top: 62.5%;
}
.top_service_img img{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
}
@media screen and (max-width: 1023px){

}
@media screen and (max-width: 834px){
  .top_service_box{
    width: calc(50% - 16px/2);
  }
  .top_service_box p{
    font-size: 18px;
  }

}
@media screen and (max-width: 480px){
  .top_service_box {
    width: 100%;
    margin: 0 0 32px 0;
  }
}
/************************************
** top 生命保険に関するご相談
************************************/
.top_insurance{
  width: 100%;
  display: flex;
  flex-flow: wrap;
  align-items: flex-start;
  justify-content: space-between;
  margin: 82px 0 0 0;
}
.top_insurance_box{
  width: calc(33.33% - 32px/3);
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  padding: 66px 16px 16px 16px;
  position: relative;
  background-color: #ffffff;
}
.top_insurance_box p{
  font-size: 24px;
  margin: 16px 0 0 0;
}
.top_insurance_box p span{
  display: inline-block;
}
.top_insurance_box .top_insurance_heading{
  width: 100px;
  height: 100px;
  border-radius: 50px;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50% ,-50%);
  color: #ffffff;
  background-color: #75909A;
}
.top_insurance_box .top_insurance_heading span{
  line-height: 1;
}
.top_insurance_box .top_insurance_heading span:last-of-type{
  font-size: 40px;
}
.top_insurance_box .top_insurance_img{
  width: 80%;
}
@media screen and (max-width: 1023px){
  .top_insurance_box p {
    font-size: 20px;
  }
}
@media screen and (max-width: 834px){
  .top_insurance_box p {
    font-size: 20px;
  }
  .top_insurance_box p span{
    display: block;
  }

}
@media screen and (max-width: 586px){
  .top_insurance_box {
    max-width: 480px;
    width: 100%;
    margin: 0 auto 84px auto;
  }
  .top_insurance div:nth-child(3) {
    margin: 0 auto ;
  }
  .top_insurance_box p{
    margin: 24px 0 0 0;
  }
  .top_insurance_box p span{
    display: inline-block;
  }

}
/************************************
** top カーメンテナンスのオンライン予約
************************************/

.footer_img{
  background: url(./img/footer.jpg) no-repeat center;
  background-size: cover;
  position: relative;
  height:600px;
  width: 100%;
  margin: 0;
}
.footer_img::before{
  background-color: rgba(0,0,0,0.4);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
@media screen and (max-width: 1023px){
  .footer_img {
    height: 500px;
  }

}
@media screen and (max-width: 834px){
  .footer_img {
    height: 400px;
  }

}
@media screen and (max-width: 480px){
  .footer_img {
    height: 300px;
  }

}
/************************************
** top 会社概要
************************************/
.top_company{
  width: 100%;
}
.top_company ul{
  width: 100%;
  padding: 0;
  margin: 0 0 32px 0;
}
.top_company ul li{
  width: 100%;
  list-style: none;
  margin: 0 0 8px 0;
}
.top_company ul li:first-of-type{
  font-size: 24px;
  font-weight: bold;
}
.top_company iframe{
  width: 100%;
}
@media screen and (max-width: 1023px){

}
@media screen and (max-width: 834px){

}
@media screen and (max-width: 480px){

}