@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.red{
	color:#bf1b1b;
}

.wp-image-421{
	transition:0.3s;
	box-shadow:0 0 10px #ababab;
}
.wp-image-421:hover{
	opacity:0.6;
	box-shadow:0 0 20px #ababab;
}

/* XO Event Calendar ------------------------- */

.xo-event-calendar {
    margin: 0 auto;
}
.xo-months {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    justify-content: space-between;
}
.xo-month-wrap {
    width: 47%;
}
@media screen and (max-width: 599px) {
    .xo-event-calendar {
        width: 70%;
    }
    .xo-months {
        display: block;
    }
    .xo-month-wrap {
        width: 100%;
    }
}




.logobtn{
	margin: 0 auto;
}

.responsive-tabs .responsive-tabs__list__item--active {
	color:#333!important;
}
.responsive-tabs .responsive-tabs__heading{
	border-color:#707070;
}
.responsive-tabs .responsive-tabs__heading--active{
	background:#3856a8!important;
}

.about td{
	border:none;
}
.about tr:nth-of-type(2n+1) {
  background-color: #dfeaf7;
}

bodv,html{
	overflow-x:hidden;
}
#navi .wrap{
	width:100%;
}

.content{
	margin-top:0;
}
.main{
	padding:0 29px;
}

/* .entry-title{
	position:relative;
	height:300px;
}
.entry-title:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100vw;
	display:inline-block;
	background-image:url('https://thankyou-autoservice.com/wp-content/uploads/2022/04/pc-img.png');
	background:cover;
	margin: 0 calc(50% - 50vw);
	z-index:-1;
} */

.all{
	background:#fab9b9!important;
}
.wari{
	background:#cde3fa!important;
}
.hiyou{
	background:#ededed!important;
}

/* ファーストビュー */
.topslider{
	position: relative;
	overflow: hidden;
	height:100%;
	height:600px;
}
@keyframes zoom {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.2);
	}
}
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
	animation: zoom 10s linear 0s 1 normal both;  
}
.swiper-slide{
	position:relative;
}
.slide-text{
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 30px;
	font-family: serif;
	font-weight: bold;
	text-shadow: 3px 3px 8px #000;
	color: #fff;
	transform: translate(-50%,-50%);
}
.slide-img img{
	object-fit: cover;
	height: 600px;
	width: 100vw;
}
/* ファーストビュー */
.news-box{
	padding-bottom:50px;
}
.news{
	position:relative;
	margin:0 auto;
	margin-top:-50px;
	top:0;
	width:60%;
	background:#fff;
	padding:20px;
	z-index:99!important;
	box-shadow:0 0 3px #707070;
}

.firstview{
	width:100%;
	height:600px;
	display:flex;
	position:absolute;
	top:0;
}
.firstview .f-left{
	position:relative;
	width:50%;
	background:rgba(32, 55, 116,0.8);
	padding:10px;
}
.firstview .f-left::before {
	content: "";
	position: absolute;
	top: -175px;
	left: -50px;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-bottom: 75px solid #0091EA;
}
.left-item{
	position:absolute;
	width:80%;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.f-left p{
	font-weight:bold;
	font-size:30px;
	color:#fff;
}



/* ヘッダー------------------ */
#header{
	display:none;
}
.header-item{
	display:flex;
	width:80%;
	margin:0 auto;
	height:100px;
}
.header-item div{
	margin-top:20px;
}
.pc-left{
	width:40%;
}
.pc-right{
	width:60%;
	text-align:right;
}
.omitumori{
	background:#bf1b1b;
}
.left{
	text-align:left;
}

#navi .navi-in a:hover{
	background:initial;
}
#menu-headermenu li:hover{
	transition:0.3s;
/* 	background-color: rgba(255,255,255,0.2); */
	opacity:0.5;
}



.navi-in > ul li {
  display: block;
  width: auto;
  height: 60px;
	padding:0 20px;
  line-height: 60px;
  position: relative;
}

/* 共通--- */
.article h2{
  padding: 1rem 2rem;
  border-left: 5px solid #203774;
  background: #cde1f7;
}
.article h3{
	border:none;
	border-bottom:solid 2px #203774;
}


p,a,li,th,td,.copyright,submit,h1,h2,h3{
	font-family: 'Noto Sans JP', sans-serif;
}
.home .entry-title{
	display:none;
}
.entry-title, .archive-title {
  margin: 0 0;
	color:#fff;
}
.entry-title,.archive-title{
	position:relative;
	text-align:center;
	width:100%;
	padding:150px 0;
	height:300px;
}
.entry-title:before,.archive-title:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100vw;
	background:url('https://thankyou-autoservice.com/wp-content/uploads/2022/04/pc-img.png');
	margin: 0 calc(50% - 50vw);
	z-index:-1;
	background-size:cover;
}
.entry-title:after,.archive-title:after{
	content:'';
	background:#222;
	position:absolute;
	top:55%;
	left:50%;
	height:80px;
	width:100vw;
	transform:translate(-50%,-50%);
/* 	margin: 0 calc(50% - 50vw); */
	z-index:-1;
}
.center{
	text-align:center;
}
.center p{
	text-align:left;
	display:inline-block;
}
.box-item{
	position:relative;
	padding:30px 0;
}
.box-item2:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100vw;
	background:#f0f0f0;
	margin: 0 calc(50% - 50vw);
	z-index:-1;
}

/* mobile------------ */
.g-nav{
	position:fixed;
	z-index: 999;
	top:0;
	left: -120%;
	width:100%;
	height: 100vh;
	background:#fff;
	transition: all 0.6s;
}
.g-nav.panelactive{
	left: 0;
}
.g-nav.panelactive .g-nav-list{
	position: fixed;
	z-index: 999; 
	width: 100%;
	height: 100vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.g-nav ul {
	position: absolute;
	z-index: 999;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	padding-left:0;
}
.g-nav li{
	list-style: none;
	text-align: center;
}
.g-nav li a{
	color: #333;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}
.openbtn{
	position:fixed;
	z-index: 9999;
	top:10px;
	left: 10px;
	cursor: pointer;
	width: 50px;
	height:50px;
	background:#203774;
}
.openbtn span{
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 14px;
	height: 3px;
	border-radius: 2px;
	background-color: #fff;
	width: 45%;
}
.openbtn span:nth-of-type(1) {
	top:15px; 
}
.openbtn span:nth-of-type(2) {
	top:23px;
}
.openbtn span:nth-of-type(3) {
	top:31px;
}
.openbtn.active span:nth-of-type(1) {
	top: 18px;
	left: 18px;
	transform: translateY(6px) rotate(-45deg);
	width: 30%;
}
.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}
.openbtn.active span:nth-of-type(3){
	top: 30px;
	left: 18px;
	transform: translateY(-6px) rotate(45deg);
	width: 30%;
}
.mobile{
	height: 70px;
	width:100%;
	z-index: 999;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background:#203774;
	color:#fff;
	text-align: center;
	padding: 20px;
}
.mobile img{
	margin:0 auto;
}

#menu-footerbtn{
	background:#bf1b1b;
}
#menu-footerbtn .navi-menu-button:first-child{
	background:#203774;
}
#menu-footerbtn li a{
	display:flex;
	width:80%;
	color:#fff;
	margin:0 auto;
}
#menu-footerbtn li a .menu-icon{
	width:20%;
	padding-top:10px;
	text-align:right;
}
#menu-footerbtn li a .menu-caption{
	width:80%;
	font-size:1.1rem;
	font-weight:bold;
	padding-top:10px;
	opacity:1;
}

.footer a:hover{
	color:#203774!important;
}


/* お問い合わせ-------------------------- */
.wpcf7 .wpcf7-submit:disabled{
	background:#fff;
	color:#707070;
	border:solid 1px #cfcfcf;
}
.wpcf7 .wpcf7-submit:disabled:hover{
	background:#fff;
	color:#707070;
}
.wpcf7 .wpcf7-submit{
	background:#203774;;
	border:solid 1px #203774;
	color:#fff;
	font-size:1rem;
	transition:0.3s;
}
.wpcf7 .wpcf7-submit:hover{
	background:#fff;
	color:#203774;
}
.design-flex{
	display:flex;
}
.design-item{
	border:solid 1px #88d0f7;
	padding:5px;
}
.design-item div{
	background:#88d0f7;
	padding:10px;
}
.wp-block-contact-form-7-contact-form-selector{
	width:80%;
	margin:0 auto;
}
.required,.optional{
	margin-left:20px;
	padding:0px 5px 2px;
	color:#fff;
}
.required{
	background:#f06565;
}
.optional{
	background:#5e94db;
}
#booking-form .required{
	background:none;
}
.wpcf7-form-control{
	margin-top:5px;
}
.timeselect{
	display:flex;
	width:100%;
	padding:10px 0;
}
.timeselect div{
	width:50%;
}
.timeselect div:first-child{
	margin-right:10px;
}
.timeselect p{
	margin-bottom:0;
}
.timeorder{
	display:flex;
	width:100%!important;
	 justify-content:space-around;
	text-align:right;
}

/* トップ--------------------------------- */
.point {
	display: grid;
	gap: 40px;
	/* 以下、minmax内の「240px」が１個の円の最小幅。お好みで */
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.point .point-itm {
	border-radius: 100%;
	padding: 16px;
	border:solid #222 1px;
	background: #fff;
	/* 以下のFlexboxで文字を中央寄せ */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	box-shadow:0px 5px 10px #707070;
	transition:0.3s;
}
.point .point-itm::before {/* 擬似要素で正円を作る */
	display: block;
	content: '';
	padding-top: 100%;
}
.point .point-itm a{
	position:relative;
	display:block;
	width:100%;
	height:100%;
	text-decoration:none;
	color:#222;
}
.point .point-itm span{
	text-align:center;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.point .point-itm img{
	text-align:center;
}
.point .point-itm:hover{
	box-shadow:0px 5px 30px #707070;
	border-radius: 100%;
}

.sample_box3_2 {
    margin-top: 0;
    padding: 1em 1.5em;
    background: #fff;
	border:solid 1px #203774;
	max-height:400px;
}
.home .sample_box3_2{
	height:250px;
}
.sample_box_title { 
    padding: 0.5em 0.5em 0.4em;
    text-align: center;
    font-size: 1.3em;/*タイトル文字サイズ*/
    background: #203774;/*タイトル文字背景色*/
    color: #ffffff;/*タイトル文字色*/
    font-weight: bold;
    letter-spacing: 0.05em;
	margin-bottom:0;
}
.sample_box_title p {
    margin-bottom: 0;
}
.page-id-36 .sample_box3_2,.page-id-27 .sample_box3_2{
	padding-top:50px;
}

/* ボタンデザイン----------------- */
.reseve-btn{
	display:block;
	max-width:400px;
	padding:25px 20px;
	background:#bf1b1b;
	color:#fff;
	border:solid 2px #bf1b1b;
	text-decoration:none;
	margin:0 auto;
	box-shadow:0 5px 5px #707070;
	transition:0.4s;
}
.linkbtn{
	padding:20px 15px;
	background:#203774;
	border:solid 2px #203774;
}
.reseve-btn:hover{
	background:#fff;
	color:#bf1b1b;
	box-shadow:0 5px 10px #707070;
}
.linkbtn:hover{
	padding:20px 15px;
	background:#fff;
	color:#203774;
}



.ipad-header,.sp{
	display:none;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	/*必要ならばここにコードを書く*/

	.pc-header,#navi,.pc{
		display:none;
	}
	.ipad-header,.sp{
		display:block;
	}

	.point-itm p{
		font-size:14px;
		margin-bottom:5px;
	}

}

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


	.firstview .f-left{
		position:initial;
		width:40%;
		background:rgba(32, 55, 116,0.8);
		padding:10px;
	}
	.left-item p{
		text-shadow:0 2px 5px #222; 
	}

	.about td{
		display:block;
		width:100%;
		font-size:1rem;
		padding:15px;
	}
	.about tr:nth-of-type(2n+1) {
		background-color: #fff;
	}
	.about tr td:first-child{
		background:#dfeaf7;
		text-align:center;
		padding:10px 0;
	}

	.home .sample_box3_2{
		height:320px;
	}

}

@media screen and (max-width: 599px){
	.home .sample_box3_2{
		height:200px;
	}
}


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

	.f-left p{
		font-size:23px;
	}
	.news-box{
		padding-bottom:50px;
	}
	.news{
		position:relative;
		margin:0 auto;
		margin-top:30px;
		top:0;
		width:80%;
		background:#fff;
		padding:20px;
		z-index:1!important;
		box-shadow:0 0 3px #707070;
	}

}