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

/* ===================== cycling_lead ===================== */

.page_cycling {
	background-color: #d6ede9;
}

.cycling_lead {
	padding-bottom: 30px;
}

.cycling_lead .bg_image {
	width: 100%;
	margin: 0 auto;
	padding-top: 150px;
	background-image: url("../img/bg_cycling_0522.png");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	text-align: center;
}

.cycling_lead .img_area {
	display: flex;
	width: 400px;
	max-width: 92%;
	margin: 0 auto;
	padding: 0px 0 20px;
	gap:1em;
	justify-content: center;
}

.cycling_lead h1 {
	font-size: 1.8em;
	line-height: 1.4em;
	letter-spacing: 4px;
	
	padding-bottom: 20px;
}

.cycling_lead .lead_txt {
	color: #099;
	font-weight: bold;
	font-size: 1.1em;
}

@media(max-width:768px){

.cycling_lead .bg_image {
	padding-top: 70px;
	background-position: top -100px center;
	background-size: cover;
	text-align: center;
}

.cycling_lead h1 {
	font-size: 1.6em;
	letter-spacing: 0px;
	padding-bottom: 20px;
}

}


/* ===================== cycling_point ===================== */

.cycling_point {
	width: 100%;
	margin: 0 auto;
	background-color: #c4e5df;
}

.cycling_point .ttl_area {
	text-align: center;
	font-weight: bold;
	background-color: #fefef4;
	margin-top: 30px;
	border-top: 12px double #95c7bb;
}

.cycling_point .ttl_area .ttl_txt {
	font-size: 1.6em;
	padding-top: 10px;
}

.cycling_point .ttl_area .img_area {
	width: 100%;
	padding-top: 30px;
}

.cycling_point .ttl_area .img_area img {
	width: 50%;
	height: auto;
	max-width: 300px;
}

.cycling_point .cnt_area {
	background-color: #fefef4;
	width: 100%;
	
	padding-top: 20px;
}

.cycling_point .cnt_area .txt_area {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 20px 1em 4em;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position: bottom 20px right 20px;
	background-size: 200px auto;
}

.cycling_point .cycling_bike .txt_area {
	background-image: url("../img/bg_bike.png");
}

.cycling_point .cycling_cafe .txt_area {
	background-image: url("../img/bg_cafe.png");
}

.cycling_point .cycling_view .txt_area {
	background-image: url("../img/bg_view.png");
}


/* slick slider */

    .slider {
        width: 100%;
        margin: 0 auto;
    }

    .slick-slide {
      margin: 0px 10px;
    }

    .slick-slide img {
      width:auto;
	  height:400px;
    }


@media (max-width:768px) {

.cycling_point .ttl_area .ttl_txt {
	font-size: 1.4em;
	line-height: 1.4em;
	padding-bottom: .2em;
}

.cycling_point .cnt_area {
	padding-top: 10px;
}

.cycling_point .cnt_area .txt_area {
	text-align: left;
	max-width: 480px;
}

.slick-slide {
      margin: 0px 5px;
    }

.slick-slide img {
      width:auto;
	  height:200px;
    }

}



/* ===================== cycling_faq ===================== */

.cycling_faq {
	background-image: url("../img/bg_map.png");
	background-repeat: no-repeat;
	background-position: bottom 0 right -300px;
	padding-bottom: 100px;
}

.cycling_faq .ttl_area {
	width: 500px;
	max-width: 70%;
	margin: 0 auto;
	text-align: center;
	padding: 100px 0 30px;
	box-sizing: border-box;
}

h2 {
	font-size: 1.4em;
	letter-spacing: 4px;
}


/* accordion */
.accordion_one {
	width:92%;
	max-width: 900px;
    margin: 0 auto 30px;
}
.accordion_one .accordion_header {
    background-color: #699;
    color: #fff;
	
    font-weight: bold;
    position: relative;
    z-index: +1;
    cursor: pointer;
    transition-duration: 0.2s;
	padding:20px;
}

.accordion_one .accordion_header p {
	width: 95%;
	line-height: 1.4em;
	text-indent: -50px;
	padding-left: 50px;
	box-sizing: border-box;
}

.accordion_one .accordion_header .i_box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 1%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    box-sizing: border-box;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    transform-origin: center center;
    transition-duration: 0.2s;
}

.accordion_one .accordion_header.stay .i_box {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.accordion_one .accordion_header .i_box .one_i {
    display: block;
    width: 18px;
    height: 18px;
    transform-origin: center center;
    transition-duration: 0.2s;
    position: relative;
}

.accordion_one .accordion_header .i_box .one_i:before, .accordion_one .accordion_header .i_box .one_i:after {
    display: flex;
    content: '';
    background-color: #fff;
    border-radius: 10px;
    width: 18px;
    height: 4px;
    position: absolute;
    top: 7px;
    left: 0;

    transform-origin: center center;
}
.accordion_one .accordion_header .i_box .one_i:before {
    width: 4px;
    height: 18px;
    top: 0;
    left: 7px;
}
.accordion_one .accordion_header.stay .i_box .one_i:before {
    content: none;
}
.accordion_one .accordion_header.open .i_box .one_i:before {
    content: none;
}
.accordion_one .accordion_header.stay.open .i_box .one_i:before {
    content: "";
}
.accordion_one .accordion_header.open .i_box .one_i:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.accordion_one .accordion_header.stay.open .i_box .one_i:after {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.accordion_one .accordion_inner {
    display: none;
    padding: 15px 30px 30px;
    box-sizing: border-box;
}
.accordion_one .accordion_inner.stay {
    display: block;
}

.accordion_one .accordion_inner .box_one {
    height: 100%;
}

.accordion_one .accordion_inner .box_one a,
.accordion_one .accordion_inner .box_one a:hover {
	color: #099;
}

.faq_txt {
	padding-bottom: .8em;
}

.faq_link {
	padding-top: 1em;
}


@media (max-width:540px) {

.cycling_faq {
	padding-bottom: 2em;
	background-size: 900px auto;
}

.cycling_faq .ttl_area {
	padding: 2em 0 1em;
}

.accordion_one .accordion_header {
	padding: 10px;
}

.accordion_one .accordion_header p {
	width: 90%;
}

}