@charset "UTF-8";
/* CSS Document */

/*
Theme Name: bybee
Theme URl: テーマのURL
Author: テーマの作成者
Description: テーマの説明
tags: テーマのタグ
License: テーマのライセンス
License URl: テーマのライセンスURL
Version: バージョン
*/
	/*共通CSS*/
	/*WordPress対策・全ページ余白なし*/
	* {
		margin: 0;
		padding: 0;
	}
	
	body {
		margin: 0;
		padding: 0;
		color: #000;
		background: #fff;
		font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
	}
	
	img {
		vertical-align: bottom; /*下に余白を作らない*/
		max-width: 100%;
		width: 100vw;
	}
	
	p,h1,h2,h3,h4,span {
	}
	
    ul li{
		list-style: none;
	}

	a {
		text-decoration: none;
		color:#000;
	}

	a:hover{
		opacity: 0.7;
	}

	/* input全体に指定する場合は以下 */
input{
    -webkit-appearance: none;
}

input[type="checkbox"] {
    appearance: auto !important;
	width: 13px !important;
    height: 13px !important;
}
	
	.wrap {
		overflow: hidden;
	}
	
	/*floatを解除する*/
	.clear {
		clear: both;
	}

	.all-page {
		position: relative;
		z-index: 1;
		width: 100%;
		height: auto;
	}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*PC*/
@media only screen and (min-width: 769px){	
		.sp { display: none !important; }

	/*ヘッダー＆フッター*/
		/*グローバルメニュー*/
		header {
			position: relative;
			z-index: 104;
			width: 96%;
			padding: 2% 2% 1% 2%;
			border-bottom: 10px solid #ff9e00;
			background: linear-gradient(#e5002d 0%, #a9002d 100%);
		}
	
		.head_menu {
			display: flex;
			justify-content: space-between;
		}
	
		#logo {
			width: 66%;
		}
	
		.head_tel {
			width: 30%;
		}
	
		.head_sub{
			position: fixed;
			top: 160px;
			right: 0;
			width: 80px;
		}
	
		.head_line {
			position: fixed;
			top: 540px;
			right: 0;
			width: 70px;
		}
	
		.cont_wrap{
			position: relative;
			width: 1000px;
			margin:0 auto;
		}

		/*フッター*/
		footer {
			position: relative;
			z-index: 1;
			width: 100%;
			margin: 0 auto;
			height: auto;
			border-top: 10px solid #ff9e00; 
		}
	
		.footer-box{
			position: relative;
			width:100%;
			height: auto;
			text-align: center;
			margin: 0 auto;
			padding: 40px 0;
			background: #e5002d;
		}
		
	    .logo-area {
			position: relative;
			display: block;
			margin: 20px auto;
	    }
	
	    .logo-area img{
		    width: 240px;
		    height: auto;
	    }
	
		.logo_sub {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 20px;
		}
	
		.footer-box a{
			display: block;
			width: 600px;
			margin:0px auto;
			padding-bottom: 20px;
		}
	
		.logo-catch {
			width: 800px;
			margin: 20px auto;
		}
	
		.fa{
			width: 260px;
		}
	
		.mai{
			display: block;
			width: 430px;
			margin: 10px auto;
		}
	
		.kobu{
			width: 340px;
			margin: 20px auto;
		}
	
		.add-area{
			text-align: center;
			color: #fff;
			font-size: 16px;
		}
	
		.add-area span{
			display: block;
			font-size: 12px;
			margin-bottom: 20px;
		}
	
		.footer-credit {
			position: relative;
			padding: 10px 0;
			background: #ff9e00;
    		color: #fff;
			font-size: 16px;
			text-align: center;
			font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
		}
}
	/*トップページ*/
	/*PC*/
@media only screen and (min-width: 769px){
		/*トップページ*/
	
	.top-keyvisual{
		position: relative;
	}
	
	.back01{
		background: #ff0000;
	}
	
	.cta01{
		width: 800px;
		height: auto;
		margin: 0px auto;
        padding: 40px 0px;
	}
	
	.fl_cta{
		display: flex;
		justify-content: space-between;
	}
	
	.linect{
		width: 330px;
		height: auto;
	}
	
	.telct{
		width: 430px;
		height: auto;
	}
	
	.cta02{
		position: relative;
		margin-top: 60px;
	}
	
	.in_cta{
		position: absolute;
        top: 60px;
        right: 0;
        left: 0;
	}
	
	.cont_fuki{
		position: relative;
	}
	
	.fuki{
		position: absolute;
        top: -16px;
        left: 0;
        right: 0;
        margin: auto;
        width: 640px;
        height: auto;
	}
	
	.bordline{
		background:#e5002d;
		width:100%;
		height:10px;
	}
	
	.slide-catch{
		position: absolute;
		z-index: 10;
		top: 50px;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
	}
	
	.slide-catch02{
		position: absolute;
		z-index: 10;
		top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
	}

/*==================================================
スライダーのためのcss
===================================*/
.slider {
  position:relative;
	z-index: 1;
}

/*　背景画像設定　*/
		.slider {
		    position: relative;
			width: 100%;
			height: 80vh;
		    overflow: hidden;
			z-index: 1;
		}

		.slide-image {
		  background-position: top;
		  background-repeat: no-repeat;
		  background-size: cover;
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 81vh;
		}

		.slide-image:nth-child(1) {
		  background-image:url(https://byebee.jp/wp-content/themes/bybee/images/slide-1@4x.png);
		}

		.slide-image:nth-child(2) {
		  background-image:url(https://byebee.jp/wp-content/themes/bybee/images/slide-2@4x.png);
		}

		.slide-image:nth-child(3) {
		  background-image:url(https://byebee.jp/wp-content/themes/bybee/images/slide-3@4x.png);
		}

/*矢印の設定*/

.slick-prev, 
.slick-next {
    position: absolute;
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}
	
	.sllogo{
		position: absolute;
        top: 5%;
        left: 10%;
        width: 40%;
        z-index: 10;
	}
	
	.bot_catch{
		position: absolute;
		bottom: 0;
		background: #ff9e00;
		width: 100%;
		height: 19vh;
		z-index: 20;
		display: flex;
        justify-content: center;
        padding: 1% 0;
	}
	
	.ca_m{
		width: 10%;
	}
	
	.ca_t{
		width: 70%;
        margin-left: 20px;
	}
		
		.fadein {
			opacity : 0;
			transform : translate(0, 50px);
			transition : all 600ms;
		}
		
		.fadein.scrollin {
			opacity : 1;
			transform : translate(0, 0);
		}
		
		.content-top{
			position: relative;
			display: block;
			text-align: center;
			width: 100%;
			height: auto;
			padding: 40px 0 160px 0;
		}
		
		.content-top h2{
			position: relative;
			display: inline-block;
			font-size: 56px;
			font-weight: 900;
			color: #e5002d;
			border-bottom: 5px solid #e5002d;
			margin: 60px auto;
			font-family: "kozuka-gothic-pr6n", sans-serif;
			font-style: normal;
		}
	
		.col_w{
			color: #fff !important;
			border-bottom: 5px solid #fff !important;
		}
	
		.fonw{
			width: 800px !important;
		}
	
		.ws {
			width: auto;
			margin-bottom: 120px;
		}
	
		.by_fl{
			display: flex;
			justify-content: space-between;
        	margin: 40px 0;
		}
	
		.bybox{
			width: 320px;
			height: auto;
		}
	
		.ar_m{
			display: block;
			width: 140px;
			height: auto;
			margin: 60px auto 0;
		}
	
		.by_fl{
			text-align: center;
			font-size: 18px;
        	font-weight: bold;
		}
	
		.bybox_p{
			text-align: center;
			font-size: 24px;
        	font-weight: bold;
		}
	
		.bylist{
			margin-bottom: 20px;
		}
	
		.back02{
			background: #f0efeb;
		}
	
		.back03{
			background-position: top;
			background-repeat: no-repeat;
			background-size: cover;
			background-image:url(https://byebee.jp/wp-content/themes/bybee/images/okyakusamano-koe-back@4x.png);
		}
	
		.back04{
			background: #e5002d;
		}
	
		.back05{
			background: #ffd400;
		}
	
		.accordion-title {
			position: relative;
			font-size: 18px;
			padding: 20px 0;
			letter-spacing: 2px;
			width: 800px;
			border: 1px solid #e5002d;
			margin: 0px auto;
			margin-top: 40px;
			text-align: center;
			background:#fff;
			color:#e5002d;
			line-height: 54px;
		}
	
		.lh{
			line-height: 54px;
		}
	
		.accordion-title:before,.accordion-title:after {
			position: absolute;
			content: '';
			width: 25px;
        	height: 1px;
        	top: 46px;
        	right: 20px;
			background-color: #e5002d;
		}
	
		.accordion-title:after {
		  	top: 46px;
        	transform: rotate(90deg);
		}
	
		.accordion-title.open:after {
		  	top: 46px;
        	transform: rotate(0deg);
		}

		.accordion-content {
		  display: none;
		}
	
		.accordion-content {
			position: relative;
			font-size: 18px;
			text-align:center;
			padding: 20px;
			margin: 0px auto;
			width: 760px;
			letter-spacing: 2px;
			color: #e5002d;
			border: 1px solid #e5002d;
			background: #fff;
			line-height: 54px;
		}
		
	/*お問い合わせ*/
		
		.contact-box{
			margin-top:50px;	
		}	
		
		.contact-p{
			width: 90%;
			margin: 50px auto;
			text-align: center;
		}
		
		.contact-catch {
			text-align: center;
			font-size: 24px;
			margin-bottom: 60px;
		}
		
		
		.contact-form-inner {
			max-width:640px;
			margin: 0 auto;
			padding-bottom: 60px;
			text-align: left;
		}

		.contact-form-inner h3{
			position:relative;
			font-size: 18px;
        	font-weight: bold;
        	padding: 20px;
		}
	
		.contact-form-inner h3:before{
			position: absolute;
			content: '';
			top:20px;
			left: 0;
			width: 10px;
			height: 26px;
			background: #000;
		}

		.p_check{
			text-align: center;
			margin: 20px 0;
			font-size: 14px;	
		}		

		.contact-de{
			margin-top: 40px;	
		}

		.contact-de span{
			font-size: 20px;
			font-weight: bold;
			color: #0055be;	
		}
		
		.contact-de p{
			margin-top:10px;
		}

		.contact-end{
			font-size: 15px;
    		margin: 40px 0;	
		}
		
.form-item:first-child {
    margin-top: 0;
}
.form-item {
    margin: 30px auto 0;
}
.form-item label{
    display: block;
    font-size: 16px;
    color: #333333;
	 text-align: left;
	font-weight: bold;
}
.form-item input{
    width: 100%;
    height: 40px;
    border: 1px solid #000;
    margin-top: 10px;
}
.form-item input::placeholder,
.form-item textarea::placeholder {
    padding-left:15px;
}
	
.form-item:first-child {
    margin-top: 0;
}
.form-item02 {
    margin-top: 30px;
    margin-right: 30px;
    width: 260px;
}
.form-item02 label{
    display: block;
    font-size: 16px;
    color: #333333;
	 text-align: left;
	font-weight: bold;
}
.form-item02 input{
    width: 100%;
    height: 40px;
    border: 1px solid #000;
    margin-top: 10px;
}
.form-item02 input::placeholder,
.form-item02 textarea::placeholder {
    padding-left:15px;
}
	
	.inli{
		display: inline-block;
	}

.form-hissu {
    color: #fff;
    font-size: 13px;
    margin-left: 15px;
    padding: 3px 5px;
    background-color: #e5002d;
}
	
.form-nin {
    color: #fff;
    font-size: 13px;
    margin-left: 15px;
    padding: 3px 5px;
    background-color: #00a89c;
}

.form-item textarea{
    height: auto;
    width: 100%;
    border: 1px solid #3c3c3c !important;
    margin-top: 10px;
}
.last_check {
    display: block;
    text-align: center;
    vertical-align: middle;
	margin-top: 20px;
}
.last_check > input {
    width: auto;
    height: auto;
    margin: 0 10px 0 0;
}
.last_check a {
    text-decoration: none;
}
.form-item.send-btn{
	position: relative;
    width: 300px;
    margin: 40px auto 0;
}

.form-item.send-btn input{
    	display: block;
        position: relative;
        width: 300px;
        padding: 0.4em;
        text-align: center;
        color: #fff;
        margin: 0 auto;
        font-size: 20px;
        border: none;
        border-radius: 30px;
        height: auto;
        background: #000;
}
	
.form-item.send-btn:after{
			content: '▶︎';
			display: inline-block;
			position: absolute;
			top: 17px;
			right: 24px;
			font-size: 10px;
			color: #fff;
		}
	
.form-item.send-btn input:hover {
    transition: all .3s;
	opacity: 0.7;
	cursor: pointer;
}
		
form.wpcf7-form.invalid {
    max-width: 1000px;
    margin: 0 auto;
}
	
.wpcf7-list-item {
    display: inline-block;
    margin: 1em 0 0 3em !important;
}
	
	.file{
		display: block;
		margin: 30px auto 0;
	}
	
	#your-file {
		font-weight: bold;
	}
	
	.con{
		width: 310px;
        margin: 40px auto;
	}
	
	.wpcf7-form-control-wrap {
		position: relative;
		display: block;
	}
	
	input.wpcf7-form-control.wpcf7-file {
		margin: 20px 0;
	}
	
	.btn2 {
		display: block;
		position: relative;
		width: 300px;
		padding: 0.4em;
		text-align: center;
		color: #fff;
		margin: 40px auto;
		font-size: 20px;
		border: none;
		border-radius: 30px;
		height: auto;
		background: #000;
	}
	
	.content {
		padding: 60px 0;
	}

.fadeIn{
animation-name:fadeInAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
	transform: translate(0px, 50px);
  }

  to {
    opacity: 1;
	transform: translate(0px, 0px);
  }
}		
}