html{
font-size: 62.5%;
}

body{
text-align: center;
width: 100%;
height: auto;
margin: 0;
padding: 0;
font-size: 1.6em;
}

header{
margin-top: 1rem;
}

.pc{
display: none !important;
}

.mobile{
display: block !important;
width: 100%;
height :auto;
padding: 0 1rem;
box-sizing: border-box;
}

a{
text-decoration: none;
}

a:link{
color: #1e90ff;
}

a:visited{
color: #1e90ff;
}

address{
font-size: 1.6rem;
}

#rogo address{
float: right;
padding: 0 1rem;
}

nav ul{
margin: 0;
padding: 0 1rem;
list-style: none;
}

nav ul li{
text-align: left;
font-size: 2rem;
margin: 3rem 0 0;
padding: 0 1.5rem;
border-bottom: dotted 0.1rem #000000;
}

nav ul li a:link{
color: #000000;
}

nav ul li a:visited{
color: #000000;
}

#nav-drawer{
position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown{
display: none;
}

/*アイコンのスペース*/
#nav-open{
display: inline-block;
width: 3rem;
height: 2.2rem;
vertical-align: middle;
float: left;
padding: 1.5rem 1rem 0;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after{
position: absolute;
height: 0.3rem;/*線の太さ*/
width: 2.5rem;/*長さ*/
border-radius: 0.3rem;
background: #000000;
display: block;
content: '';
cursor: pointer;
}

#nav-open span:before{
bottom: -0.8rem;
}

#nav-open span:after{
bottom: -1.6rem;
}

/*閉じる用の薄黒カバー*/
#nav-close{
display: none;/*はじめは隠しておく*/
position: fixed;
z-index: 99;
top: 0;/*全体に広がるように*/
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}

/*中身*/
#nav-content{
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/*最前面に*/
width: 60%;/*右側に隙間を作る（閉じるカバーを表示）*/
max-width: 33rem;/*最大幅（調整してください）*/
height: 100%;
background: #ffffff;/*背景色*/
transition: .3s ease-in-out;/*滑らかに表示*/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close{
display: block;/*カバーを表示*/
opacity: .5;
}

#nav-input:checked ~ #nav-content{
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示（右へスライド）*/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

h1{
color: #ffffff;
background-color: #6495ed;
font-size: 1.8rem;
margin: 0;
padding: 1rem 0.5rem;
clear: both;
font-weight: bold;
}

.topimg{
width: 100%;
height: auto;
}

p{
font-size: 1.6rem;
margin: 1rem;
}

.first{
font-size: 1.6rem;
margin: 1rem;
}

h2{
position: relative;
font-size: 1.8rem;
color: #ffffff;
background-color: #ff8c00;
padding: 0.5rem;
margin: 4rem 1rem;
border-radius: 0.6rem;
}

h2::after {
position: absolute;
top: 100%;
left: 30px;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 15px solid #ff8c00;
}

.menu{
margin: 5rem 0;
}

.menu img{
width: 100%;
height: auto;
margin: 0;
padding: 0 1rem;
box-sizing: border-box;
}

.divemenu a:link{
color: #000000;
}

.divemenu a:visited{
color: #000000;
}

.divemenu{
font-size: 1.8rem;
font-weight: bold;
margin: 0 1rem;
padding: 0;
}

.menu ul{
list-style: none;
margin: 0.5rem 1rem;
padding: 0;
}

.menu ul li{
font-size: 1.6rem;
margin: 0;
padding-top: 1rem;
border-bottom: dotted 0.1rem #000000;
}

.explanation{
font-size: 1.6rem;
margin: 0 1rem;
padding: 0;
}

.sns{
list-style: none;
margin: 0 1rem;
padding: 0;
}

.sns li{
width: 100%;
height: auto;
margin: 0;
}

#page_top{
width: 5rem;
height: 5rem;
position: fixed;
right: 1rem;
bottom: -5rem;
background: #3f98ef;
opacity: 0.6;
border-radius: 50%;
}

#page_top a{
position: relative;
display: block;
width: 5rem;
height: 5rem;
text-decoration: none;
}

#page_top a::before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f102';
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;
top: -5px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

footer{
color: #ffffff;
background-color: #6495ed;
margin-top: 2rem;
padding: 2rem;
}

footer a:link{
color: #ffffff;
}

footer a:visited{
color: #ffffff;
}

.breadcrumb{
margin: 1rem;
padding: 0;
text-align: left;
list-style: none;
clear: both;
}

.breadcrumb li{
font-size: 1.6rem;
display: inline;
list-style: none;
}

.breadcrumb li:after{
content: '>';
padding: 0 0.2rem;
}

.breadcrumb li:last-child:after{
content: '';
}

.check{
position: relative;
margin: 3rem 1rem;
padding: 1rem;
border: solid 0.3rem #95ccff;
border-radius: 0.8rem;
}

.check .box{
position: absolute;
display: inline-block;
top: -1.3rem;
left: 1rem;
padding: 0 0.9rem;
line-height: 1;
font-size: 1.8rem;
background: #ffffff;
color: #95ccff;
font-weight: bold;
}

.check p{
font-size: 1.6rem;
margin: 1rem 0; 
padding: 0;
}
 
table{
margin: 0 1rem;
padding: 0;
border-collapse: collapse;
text-align: left;
}

th,td{
font-size: 1.6rem;
width: 100%;
margin: 0;
padding-top: 2rem;
border-bottom: solid 1px #000000;
text-align: left;
}

.check dl{
margin: 2rem 0;
padding: 0;
}

.check dt{
font-size: 1.6rem;
margin-bottom: 1rem;
padding: 0;
border-bottom: dotted 0.1rem #000000;
}

.check dd{
font-size: 1.6rem;
margin: 0;
padding: 0;
}

.index{
margin: 3rem 1rem;
padding: 1rem;
border: solid 1rem #00bfff;
}

.index dt{
font-size: 1.6rem;
font-weight: bold;
margin: 0;
padding: 0;
}

.index dd{
font-size: 1.6rem;
margin: 1rem 0;
padding: 0;
}

.gmap{
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}

.gmap iframe{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
padding: 0 1rem;
box-sizing: border-box;
}

.item{
text-align: left;
margin: 2.5rem 1rem;
padding: 0;
}

.label{
width: 100%;
font-size: 1.6rem;
border-left: solid 0.3rem #6495ed;
margin: 0;
padding-left: 1rem;
font-weight: bold;
box-sizing: border-box;
}

.inputs{
width: 100%;
font-size: 1.8rem;
margin-top: 1rem;
padding: 0.5rem;
box-sizing: border-box;
}

.submit{
color: #ffffff;
font-weight: bold;
background-color: #6495ed;
border: none;
border-bottom: solid 0.5rem #4169e1;
font-size: 1.6rem;
padding: 0.5rem 5rem;
}

h3{
color: #000080;
font-size: 1.8rem;
margin: 5rem 1rem 0;
padding: 0;
border-bottom: dotted 0.1rem #000000;
}

.detail{
margin: 3rem 1rem;
padding: 0;
}

.detail dt{
font-size: 1.6rem;
margin-bottom: 1rem;
padding: 0;
border-bottom: dotted 0.1rem #000000;
}

.detail dd{
font-size: 1.6rem;
margin: 0;
padding: 0;
}

.image{
width: 100%;
height: auto;
margin-bottom: 1rem;
padding: 0 1rem;
box-sizing: border-box;
}

.list{
margin: 0 1rem;
padding: 0;
list-style: none;
}

.list li{
font-size: 1.6rem;
margin: 0;
padding-top: 2rem;
border-bottom: dotted 0.1rem #000000;
}

.read{
margin: 1rem 5rem;
font-size: 1.6rem;
font-weight: bold;
background-color: #a9a9a9;
padding: 1rem;
}

.read a:link,.read a:visited{
color: #ffffff;
}

.season{
margin: 3rem 1rem;
padding: 0;
}

.season dt{
font-size: 1.6rem;
margin: 0;
padding: 0.5rem;
background-color: #c0c0c0;
}

.season dd{
font-size: 1.6rem;
margin: 0;
padding: 0.5rem;
background-color: #f5f5f5;
}

.skill,.step{
margin: 3rem 1rem;
padding: 0;
}

.step{
background-color: #f5f5f5;
padding: 2rem;
}

.skill dt,.step dt{
font-size: 1.6rem;
font-weight: bold;
margin-bottom: 1rem;
padding: 0;
}

.skill dd,.step dd{
font-size: 1.6rem;
margin: 0;
padding: 0;
}

.last{
margin-top: 4rem;
}