@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.5
*/

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

.br-sp {display: none; }

/*英語版(横書き)*/

.hikingTimeTable {
display: block;
flex-wrap: wrap;
margin:0;
padding:0;
}

.checkPoint {
display: flex;
justify-content: center;
align-items: center;
padding:1px 0 1px 0;
margin: 0 10px 0 10px;
font-weight: bold;
color: #6091d3;
background: #FFF;
border: solid 3px #6091d3;
border-radius: 10px;
width:100%;
}

.routeTime {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
color: white;
margin: 0;
padding: 0;
height:70px;
}

.routeTime span {
background: #6091d3;
}

.routeTime .timeGo {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
position: relative;
margin: 0 0 14px 0;
padding:1px;
width: 75px;
text-align: center;
}

.routeTime .timeGo:after {
content: '';
border-style: solid;
border-width: 20px 50px 0px 50px;
border-color: #6091d3 transparent transparent transparent;
position: absolute;
top: 100%;
left: -13px;
}

.routeTime .timeReturn {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
position: relative;
margin: 14px 0 0 0;
padding:1px;
width: 75px;
text-align: center;
	
}

.routeTime .timeReturn:before {
content: '';
height:10px;
border-style: solid;
border-width: 0 60px 20px 60px;
border-color: transparent transparent #6091d3 transparent;
position: absolute;
top: -100%;
right: -20px;
	
	
}




/*英語版(横書き)*/

.hikingTimeTable-en {
display: block;
flex-wrap: wrap;
margin:0;
padding:0;
}

.checkPoint-en {
display: flex;
justify-content: center;
align-items: center;
padding:1px 0 1px 0;
margin: 0 10px 0 10px;
font-weight: bold;
color: #6091d3;
background: #FFF;
border: solid 3px #6091d3;
border-radius: 10px;
width:100%;
}

.routeTime-en {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
color: white;
margin: 0;
padding: 0;
height:70px;
}

.routeTime-en span {
background: #6091d3;
}

.routeTime-en .timeGo-en {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
position: relative;
margin: 0 0 14px 0;
padding:1px;
width: 75px;
text-align: center;
}

.routeTime-en .timeGo-en:after {
content: '';
border-style: solid;
border-width: 20px 50px 0px 50px;
border-color: #6091d3 transparent transparent transparent;
position: absolute;
top: 100%;
left: -13px;
}

.routeTime-en .timeReturn-en {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
position: relative;
margin: 14px 0 0 0;
padding:1px;
width: 75px;
text-align: center;
	
}

.routeTime-en .timeReturn-en:before {
content: '';
height:10px;
border-style: solid;
border-width: 0 60px 20px 60px;
border-color: transparent transparent #6091d3 transparent;
position: absolute;
top: -100%;
right: -20px;
	
	
}


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

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

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

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