/*
Theme Name : bikeday2021
*/
body{
	font-size: 17px;
	font-family: "M PLUS Rounded 1c";
	background-color: #f3fdff;
	background-size: 40px 40px;
	background-position: 0 0, 20px 20px;
	line-height: 1.3;
	-webkit-font-feature-settings: "pkna" 1;
    font-feature-settings: "pkna" 1;
	-webkit-font-smoothing: antialiased;
    -ms-touch-action: manipulation;
}
*{
	font-weight: bold;
}
img{
	max-width: 100%;
}
a img{
	transition: .3s;
}
a img:hover{
	opacity: .8;
}
.container{
	max-width: 1280px;
}
section .container{
	padding: 4rem 2rem;
}
.lead{
	line-height: 2;
}
.row{
	max-width: 100vw;
}
main h1{
	font-size: 3rem;
	letter-spacing: .05em;
	font-family: vdl-logojrblack, sans-serif;
	letter-spacing: .3rem;
	font-weight: 900;
	font-style: normal;
	margin: 3rem 0;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFF;
	padding: 8rem 0;
	text-shadow: 0px 5px 0px rgba(0, 0, 0, 0.58), 0px 0px 3px rgba(0, 0, 0, 0.58);
	background-image: url('./img/2021/title-bg2_2.png');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
main h1 span{
	position: relative;
	z-index: 1;
	background-color: rgba(230, 6, 81, 0.7);
}
main h1 span:before{
	display: block;
	position: relative;
	left: .4rem;
	bottom:-4rem;
	padding: .8em;
	z-index: -1;
}
main h1.tire{
	background-image: url('./img/2021/tire.png');
	background-position: center bottom;
	background-repeat: no-repeat;
	padding: 2rem 0;
}
main h1.tire:before,
main h1.tire:after{
	content:none;
}
main h2{
	font-family: vdl-logojrblack, sans-serif;
	text-shadow: 0px 5px 0px rgba(0, 0, 0, 0.58), 0px 0px 3px rgba(0, 0, 0, 0.58);
	letter-spacing: .2rem;
	display: inline-block;
	font-size: 2rem;
	margin-bottom: 1.5rem;
	color: #FFF;
	padding: .8rem 1.2rem;
	background-color: #ffb300;
	
}
main h2 span{
	background-color: #d35200;
	text-shadow: none;
	border-radius: 20px;
	display: inline-block;
	padding: .2rem .6rem;
	margin-left: -2rem;
	margin-top: -3rem;
	margin-bottom: .5rem;
	margin-right: .5rem;
	transform: rotate(-4deg);
}
h3{
	font-weight: bold;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 2px dotted #915252;
}
.mt-5{
	margin-top: 3rem;
}
.mb-4{
	margin-bottom: 2rem;
}
#top{
	position: relative;
	background-color: #FFF;
}
#top h1{
	margin-bottom: 0;
}
#top h1 img,
footer h1 img{
	max-width: 100px;
	height: auto;
    padding: 0.5rem 0;
}
#top figure{
	margin-bottom: 0;
}
#top nav{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	padding: 0 2rem;
}
#top nav ul{
	padding-left: 0;
	margin-bottom: 0;
	width: 100%;
}
#top nav h1{
	margin-left: 0;
	margin-right: auto;
}
#top nav .sns{
	font-size: 1.5rem;
	margin-right: 2rem;
}
.box-twitter-bg{
	background-color: #ecfaff;
	background-image: url('./img/2021/dot4.png');
	position: relative;
	z-index: 0;
	transform: rotate(-4deg) skew(-4deg);
}
#top nav .sns i.fa-twitter-square:before{
	color: #55acee;
}
#top nav .sns i.fa-line:before{
	color: #1dcd00;
}
#top nav .sns i.fa-facebook-square:before{
	color: #3B5998;
}
#top nav h1 a{
	display: inline-block;
	white-space: nowrap;
	font-size: 1.2rem;
	color: #000;
}
.row{
/* 	max-width: 690px; */
	margin: auto;
}
footer{
	background-color: #FFF;
	font-size: .8rem;
}
footer .d-flex figure{
	padding: 1rem;
	flex-basis: 100%;
}
_::-webkit-full-page-media, _:future, :root .flex-column-reverse.flex-sm-column div:first-child {
	max-height: 400px;
}
div.wpcf7-mail-sent-ok {
    color: #FFF;
}
.box-twitter-wrap{
	margin: auto;
	max-width: 600px;
	overflow: visible;
	position: relative;
}
.box-twitter-wrap iframe{
	z-index: 1;	
	overflow-y: scroll;
	max-height: 1000px;
}
.box-twitter-wrap:before{
	content:"";
	z-index: -1;
	display:block;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #93e1fc;
	transform: rotate(5deg);
}
.nav-menu{
	width: 50px;
	height: 50px;
	background-color: rgba(255, 196, 0, 1);
	justify-content: center;
	align-items: center;
	padding: .5rem;
	position: relative;
	z-index: 101;
}
.nav-menu label{
	height: 4px;
	margin-bottom: 0;
	width: 100%;
	background-color: #FFF;
	display: block;
}
.nav-menu label:before{
	height: 4px;
	width: 100%;
	background-color: #FFF;
	position: relative;
	top:-8px;
	display: block;
	content:"";
}
.nav-menu label:after{
	height: 4px;
	width: 100%;
	background-color: #FFF;
	position: relative;
	bottom:-4px;
	display: block;
	content:"";
}
#top nav ul{
	display: block;
}
#top nav ul{
	position: fixed;
	width: auto;
	height: 100vh;
	top: 0;
	right: 0;
	padding: 2rem;
	padding-top: 6rem;
	background-color: rgba(133, 103, 2, 0.7);
	z-index: 100;
	transform: translateX(100%);
	transition: .4s;
	list-style: none;
}
#top nav ul.on{
	display: block;
	transform: translateX(0);
}
#top nav ul li a{
	border-bottom: 1px solid rgba(255, 255, 255, 0.74);
	padding: 1rem;
	display: block;
	color: #FFF;
}
.link-btn{
	background-color: #f06666;
	color: #FFF;
	font-size: 2rem;
	padding: 1rem 6rem;
	border-radius: 100px;
	position: relative;
	display: inline-block;
	top:-10px;
	left: -10px;
	box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.29);
	transition: .4s;
}
.link-btn:hover{
	top:0;
	left: 0;
	color: #FFF;
	opacity: .8;
	text-decoration: none;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0.29);
}
.box-guest{
	margin: 1.5rem 0;
	text-align: center;
}
.guest-image{
	width: 300px;
	height: 300px;
	margin-bottom: 1rem;
	background-color: #FFF;
	border-radius: 100%;
	border:8px solid #920783;
	position: relative;
}
.guest-image:before{
	position: absolute;
	border-radius: 100%;
	z-index: 0;
	width: 100%;
	height: 100%;
	top:-30px;
	left: -30px;
	background-color: rgba(145, 7, 132, 0.28);
	display: block;
	content: "";
}
.guest-image:after{
	position: absolute;
	border-radius: 100%;
	z-index: 0;
	width: 100%;
	height: 100%;
	bottom:-30px;
	right: -30px;
	background-color: rgba(145, 7, 132, 0.15);
	display: block;
	content: "";
}
.guest-image img{
	z-index: 1;
	position: relative;
	border-radius: 100%;
	width: 100%;
	height: 100%;
	object-fit:cover;
}
.guest-class{
	font-size: 1.7rem;
	margin: .5rem;
}
.guest-class span{
	position: relative;
	z-index: 1;
}
.guest-class span:before{
	background-color: rgba(145, 7, 132, 0.3);
	content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 15px;
    margin: auto;
    z-index: 1;
    display: inline-block;
    border-radius: 50px;
    z-index: -1;
}
/*
.sub .guest-class span:before{
	background-color: rgba(245, 156, 12, 0.3);
}
*/
.guest-name{
	font-family: vdl-logojrblack, sans-serif;
	font-size: 2.4rem;
	font-weight: bold;
	border-right: 2px solid #5e5e5e;
	border-bottom: 2px solid #5e5e5e;
	padding-bottom: .5rem;
	margin-bottom: .5rem;
}
/*
.sub .guest-image{
	width: 300px;
	height: 300px;
	border:8px solid #f49b0c;
}
.sub .guest-image:before{
	background-color: rgba(245, 156, 12, 0.28);
}
.sub .guest-image:after{
	background-color: rgba(245, 156, 12, 0.15);
}
*/

.flex-35{
	flex-basis: 35%;
	padding: 0 .5rem;
}
.flex-65{
	flex-basis: 65%;
	padding: 0 .5rem;
}
.bnrs img{
	display: inline-block;
	margin: 1rem;
}
.border-image{
	border-radius: 6px;
	box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
}
.time-separation{
	border-bottom: 2px solid #000000;
	margin-bottom: .5rem;
	padding-bottom: 1rem;
	font-family: 'Roboto Mono', monospace;
}
.time-keeper{
	background-color: #FFF;
	border-radius: 20px;
	padding: 1rem;
	margin-bottom: 1rem;
	margin-left: 4rem;
}
.set-schedule time{
	background-color: #f75b5b;
	color: #FFF;
	font-family: 'Roboto Mono', monospace;
	padding: 5px 10px;
	margin-bottom: .6rem;
	display: inline-block;
}
.set-schedule p{
	margin-bottom: 0;
}
.schedule-title{
	font-family: vdl-logojrblack, sans-serif;
	color: #595959;
}
.board{
	background-color: #FFF;
	padding: 1.5rem;
	border: 5px solid #000;
}
.board > *{
	display: flex;
	align-items: center;
	justify-content: center;
}
.dummy{
	width: 100%;
	height: 30rem;
	background-color: #DDD;
}
.bike_01_wrapper{
	position: relative;
}
.bike_01_wrapper:before{
	position: absolute;
	left: 0;
	top:0;
	width: 65%;
	height: 70%;
	background-color: #f67575;
	display: block;
	transform: skewY(5deg);
	content: "";
}
.bike_01_wrapper:after{
	position: absolute;
	right: 0;
	bottom:0;
	width: 65%;
	height: 70%;
	background-color: #ffbcbc;
	transform: skewY(5deg);
	display: block;
	content: "";
}
.box-guest-out-wrap{
	position: relative;
}
.bike_01{
	position: relative;
	padding: 5rem 2rem;
	background-color: #ffe5e5;
	transform: rotate(3deg);
	display: block;
	content:"";
	z-index: 1;
}
.bike_01:before{
	position: absolute;
	border: 8px solid #ff8383;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	background-color: #FFF;
	transform: rotate(-4deg);
	display: block;
	content:"";
	z-index: -1;
}
.bike_01:after{
	position: absolute;
	content:"";
	width: 200px;
	height: 200px;
	display: block;
	top:-70px;
	right: 30px;
	z-index: -1;
	background: url('./img/2021/dot1.png');
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}

.bike_01_inner{
	position: relative;
	transform: rotate(-3deg);
}
.bike_01_inner:before{
	position: absolute;
	content:"";
	min-width: 15vw;
	min-height: 30vh;
	display: block;
	top:-170px;
	transform: rotate(7deg);
	background: url('./img/2021/bike2.png');
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}
.bike_01_inner:after{
	position: absolute;
	content:"";
	min-width: 15vw;
	min-height: 30vh;
	display: block;
	bottom:-170px;
	right: 0;
	transform: rotate(7deg);
	background: url('./img/2021/bike4.png');
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}
.sub-lead{
	font-size: 1.6rem;
	font-weight: bolder;
	line-height: 1.7;
}
.banner-wrap{
	position: relative;
	background: url('./img/2021/dot3.png');
	background-repeat: repeat;
	background-color: #FFF;
	padding: 2.5rem 0 1.5rem;
	transform: rotate(-2deg) skew(-2deg);
}
.banner-wrap:before{
	position: absolute;
	content:"";
	display: block;
	width: 300px;
	height: 300px;
	left: 5%;
	top: -30px;
	background: url('./img/2021/dot5.png');
	background-repeat: no-repeat;
	background-size: contain;
	z-index: -1;
}
.banner-wrap:after{
	position: absolute;
	content:"";
	display: block;
	width: 300px;
	height: 300px;
	right: 5%;
	bottom: -30px;
	background: url('./img/2021/dot6.png');
	background-repeat: no-repeat;
	background-size: contain;
	z-index: -1;
}
.banner-wrap img{
	transform: rotate(2.5deg);
}
.white-board{
	background-color: #FFF;
	padding: 1.5rem;
	height: 100%;
	border-radius: 10px;
	box-shadow: 10px 10px 0 #e1cd8e;
}
.dummy-image{
	position: relative;
}
.dummy-image:before{
	display: block;
	position: absolute;
	content:"イメージ差し替え予定";
}
.color-type-1{
	color: #ff0000;
}
.color-type-2{
	color: #22a437;
}
.color-type-3{
	color: #2237a4;
}
.color-type-4{
	color: #f9ba24;
}
.dl-check dt{
	font-size: 120%;
}
.dl-check dd:not(:last-of-type){
	margin-bottom: 1.5rem;
}
.dl-check dd:last-of-type{
	margin-bottom: 0;
}
.link-deco{
	background-color: #ffb300;
	padding: .2rem 1rem;
	color: #FFF;
	position: relative;
	display: inline-block;
	transition: .3s;
}
.link-deco:after{
	position: absolute;
	color: #ffb300;
	box-shadow: 3px 3px 0 #ffb300;
	display: block;
	content:"くわしく見る";
	background-color: #FFF;
	border: 3px solid  #ffb300;
	padding: .4rem .6rem;
	transform: skew(-8deg);
	font-size: .8rem;
	bottom:-1.8rem;
	right:-3rem;
}
.link-deco:hover{
	color: #FFF;
	opacity: .8;
}
.form-field{
	background-color: #ffb300;
	padding: 2rem;
	max-width: 800px;
	margin: auto;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea{
	padding: 1rem;
	border: none;
	
}
.form-field .wpcf7-submit{
	background-color: #FFF;
	color: #cc8f00;
	border: none;
	padding: 1rem 2rem;
	border-radius: 6px;
}
.bg_skew_dot{
	position: relative;
	background-color: #fff;
	padding: 6rem 0 7rem;
	margin-bottom: 6rem;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
}
.bg_skew_dot:before{
	position: absolute;
	content:"";
	min-width: 15vw;
	min-height: 30vh;
	display: block;
	top:-70px;
	right: 0;
	transform: rotate(-7deg);
	background: url('./img/2021/bike8.png');
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}
.bg_skew_dot:after{
	position: absolute;
	content:"";
	min-width: 15vw;
	min-height: 30vh;
	display: block;
	bottom: -70px;
	left: 0;
	transform: rotate(7deg);
	background: url('./img/2021/bike6.png');
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}

.bg_skew_dot_wrap{
	position: relative;	
	margin: 0 2rem;
	z-index: 1;
}
.bg_skew_dot_wrap:before{
	position: absolute;
	display: block;
	content: "";
	z-index: -1;
	height: 95%;
	bottom: 0;
	left: 2.3rem;
	right: 0;
	transform: skew(-6deg);
	background-color: #f0fff0;
	background-image:
	radial-gradient(#a6ee9f 20%, transparent 20%),
	radial-gradient(#a6ee9f 20%, transparent 20%);
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;
	
}
.bg_skew_dot_wrap:after{
	position: absolute;
	display: block;
	content: "";
	z-index: -1;
	height: 95%;
	bottom: 0;
	left: 0;
	right: 2.3rem;
	transform: skew(6deg);
	background-color: #f0fff0;
	background-image:
	radial-gradient(#a6ee9f 20%, transparent 20%),
	radial-gradient(#a6ee9f 20%, transparent 20%);
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;
	
}
p.lead{
	margin-bottom: 0;
}
.bike-height{
	max-height: 350px;
	width: auto;
}
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop,  .flex-column-reverse.flex-sm-column {
	  -ms-flex-direction: inherit!important;
	  flex-direction: inherit!important;
  }
	*::-ms-backdrop,  .flex-column-reverse.flex-sm-reserve {
	  -ms-flex-direction: inherit!important;
	  flex-direction: inherit!important;
	}
}
_::-webkit-full-page-media, _:future, :root .flex-column-reverse.flex-sm-column div:nth-child(2) {
	max-height: 150px;
}

@media screen and (max-width:768px){
	html,body{
		width: 100vw;
		overflow-x: hidden;
	}
	.bike_01_inner:before,
	.bike_01_inner:after{
		width: 100px;
	}
	footer .container{
		padding-left: 15px;
		padding-right: 15px;
	}
	iframe{
		max-width: 100%;
	}
	.link-btn{
		font-size: 1.4rem;
		padding: 1rem 2rem;
	}
	.guest-image{
		width: 250px;
		height: 250px;
		margin: auto;
	}
	main h1{
		font-size: 1.8rem;
	}
	main .schedule-title{
		font-size: 1.2rem;
	}
	.time-keeper{
		margin-left: 0;
	}
	#top nav{
		flex-wrap: wrap;
	}
	.box-twitter-wrap:before{
		transform: rotate(0) skewY(6deg);
	}
	.box-twitter-bg{
		padding: 3rem 1rem;
	}
	#top nav{
		padding: 0;
	}
	#top nav h1{
		padding: 0 .5rem;
	}
	section .container {
		padding: 2rem 1rem;
	}
	.sub-lead{
		font-size: 1.2rem;
	}
	.link-deco:after{
		right: -1rem;
	}
	.bg_skew_dot_wrap{
		margin: 1rem 0;
	}
	.bg_skew_dot_wrap:before,
	.bg_skew_dot_wrap:after{
		content: none;
	}
	.bg_skew_dot:after,
	.bg_skew_dot:before{
		width: 150px;
	}
	.banner-wrap:before,
	.banner-wrap:after{
		width: 150px;
		height: 150px;
	}
	.box-guest{
		padding: 1rem;
	}
	main h1.tire{
		background-position: center center;
		margin: 1.5rem 0 .5rem;
		text-align: center;
	}
	main h1.tire span{
		margin-left: 1rem;
		margin-right: 1rem;
	}
	main h1{
		padding: 4rem 0;
	}
	main h2{
		text-align: center;
		font-size: 1.8rem;
		display: block;
	}
	.bike_01:after{
		width: 100px;
		height: 100px;
		top:-30px;
	}
	#top nav{
		position: fixed;
		width: 100%;
		background-color: #FFF;
		z-index: 10;
	}
	main{
		padding-top: 7rem;
	}
	.bike_01_wrapper:before{
		top:10%;
	}
	.bike_01_wrapper:after{
		bottom:10%;
	}
}