/*nav*/
nav.main_nav{
margin: 0 auto;
width:85%;
text-align: center;

}
nav.main_nav ul li{
font-weight: bold;
text-align: center;
margin: 5px auto;
text-decoration: none;
color: #3c0102;/*文字色*/
font-size: 110%;
transition: 0.3s;
display: inline-block;
border-right: 3px dotted #ff1542;
line-height: 1.2;
}
.main_nav ul a:hover{
opacity: 0.7;
font-size: 85%;
}
.main_nav ul a:hover img{
opacity: 0.7;
 -webkit-transform: scale(1.2);
transform: scale(1.2);
}
nav.main_nav ul a li{
width: 15%;
}
nav.main_nav ul a li img{
width: 20%;
transition: 0.3s;
}
nav.main_nav ul li.this_page{
position: relative;
}
nav.main_nav ul li.this_page:before{
content: '';
position: absolute;
left: 50%;
bottom: -3px;/*線の上下位置*/
display: inline-block;
width: 50px;/*線の長さ*/
height: 5px;/*線の太さ*/
-webkit-transform: translateX(-50%);
transform: translateX(-50%);/*位置調整*/
background-color: #FF8AA1;/*線の色*/
border-radius: 2px;/*線の丸み*/
}
nav.main_nav ul li.this_page:hover{
}
.hamburger{
display: none
}
.globalMenuSp{
display: none;
}
/*info_table*/
table.table01 {
margin: 0 auto;
font-weight: bold;
font-size: 90%;
word-break: break-all;
border-collapse: separate;
/*border-spacing: 0 10px;*//*間のうペース*/
width: 90%;
}
table.table01 thead th {
color: #ffffff;
padding:10px;
background: #FF8AA1;
border:1px solid #ffffff;
}
table.table01 tbody td {
padding: 10px;
vertical-align: middle;
text-align: center;
color: #FF8AA1;
background: #FFFFFF;
border:1px solid #FF8AA1;
}
table.table01 tbody td img{
width: 30px;
height: 30px;
}
table.table01 tbody td i{
margin-right: 0;
font-size: 80%;
padding: 0;
}
.hosoku{
font-size: 90%;
line-height: 1.6;
margin: 0 auto;
text-align: right;
width: 90%;
}
.hosoku a{
color: #F17306;
text-decoration: underline;
}
.ru_left{
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.ru_right{
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
table.table02 {
margin: 0 auto;
font-weight: bold;
font-size: 90%;
word-break: break-all;
border-collapse: separate;
/*border-spacing: 0 10px;*//*間のうペース*/
}
table.table02 tbody td {
padding: 10px;
vertical-align: middle;
 border-bottom: 1px solid #FF8AA1;   
}
table.table02 tbody td img{
width: 50px;
height: 50px;
}
table.table02 tbody td i{
margin-right: 0;
}
/*======モーダルCSS========  */
.modalArea{
display: none;
position: fixed;
z-index: 10; /*サイトによってここの数値は調整 */
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modalBg {
width: 100%;
height: 100%;
background-color: rgba(30,30,30,0.9);
}
.modalWrapper {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
width: 70%;
max-width: 500px;
padding: 10px 30px;
background-color: #fff;
}
.modalContents{
white-space: pre-wrap;
}
.closeModal {
position: absolute;
top: 0.5rem;
right: 1rem;
}
/*system*/
.modal_system {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
width: 75%;
max-width:1200px;
background-color: #fff;
overflow-y: scroll;
height: 500px;
}
.modalContents_system{
padding: 20px 10px;
}
.modal_img{
width: 70%;
margin: 0 auto;
}
.modalContents_system img{
width: 100%;
}
.closeModal_system{
position: absolute;
top: 0.5rem;
right: 1rem;
cursor: pointer;
font-weight:bold;
}
@media screen and (max-width: 834px){ 
.drawer-menu{	
display: block;
}
nav.main_nav{
display: none;
}	
.top_navi{display: none;}
/*　ハンバーガーボタン　*/
.hamburger {
display : block;/*　blockにかえす　*/
position: fixed;
z-index : 541;
right : 8px;
top   : 3px;
width : 42px;
height: 42px;
cursor: pointer;
text-align: center;
}
.hamburger span {
display : block;/*　blockにかえす　*/
position: absolute;
width   : 30px;
height  : 3px ;
left    : 6px;
background : #FF8AA1;
-webkit-transition: 0.3s ease-in-out;
-moz-transition   : 0.3s ease-in-out;
transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
top: 10px;
}
.hamburger span:nth-child(2) {
top: 20px;
}
.hamburger span:nth-child(3) {
top: 30px;
}
/* ナビ開いてる時のボタン */
.hamburger.active {
-webkit-transition: all 0.3s ease-in-out;
-o-transition     : all 0.3s ease-in-out;
transition        : all 0.3s ease-in-out;
-webkit-transition-delay: 0.6s;
-o-transition-delay     : 0.6s;
transition-delay        : 0.6s;
-webkit-transform: rotate(45deg);
-ms-transform    : rotate(45deg);
-o-transform     : rotate(45deg);
transform        : rotate(45deg);
}
.hamburger.active span:nth-child(2){
width: 0px;
background: #ffffff;
}
.hamburger.active span:nth-child(1),
.hamburger.active span:nth-child(3){
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
background: #ffffff;
}
.hamburger.active span:nth-child(1){
-webkit-transform: translateY(4px);
-ms-transform    : translateY(4px);
-o-transform     : translateY(4px);
transform        : translateY(4px);
background: #ffffff;
}
.hamburger.active span:nth-child(3){
-webkit-transform: translateY(-16px) rotate(90deg);
-ms-transform: translateY(-16px) rotate(90deg);
-o-transform : translateY(-16px) rotate(90deg);
transform    : translateY(-16px) rotate(90deg);
background: #ffffff;
}
nav.globalMenuSp {
position: fixed;
display: block;
z-index : 540;
top  : 0;
left : 0;
text-align: center;
transform: translateY(-100%);
transition: all 0.9s;
width: 100%;
}
nav.globalMenuSp .nav_inner{
width: 100%;
background-image: linear-gradient(45deg, #FF8AA1 0%, #FF8AA1 100%); 
}	
nav.globalMenuSp .nav_inner p{
color: #ffffff;
font-weight: bold;
}	
.flex_nav_sp{
display: flex;
justify-content:flex-start;
flex-direction: row;
flex-wrap: wrap;
}
nav.globalMenuSp ul {
margin: 0 auto;
padding: 0;
padding:10px 5px;
}
nav.globalMenuSp ul li {
list-style-type: none;
border-radius: 5px;
padding: 10px 5px;
margin: 5px;
width: 160px;
height: 160px;
color: #ffffff;
}
nav.globalMenuSp ul li:last-child {
}
nav.globalMenuSp ul li:hover{
opacity: 0.7;
}
nav.globalMenuSp ul li a {
display: block;
text-decoration :none;
font-size: 90%;
font-weight: 500;
}
.nav_img{width: 40%;margin: 0 auto;}
.nav_img img{width: 100%;}
.nav_logo_img{width: 25%;margin: 0 auto;}
.nav_logo_img img{width: 100%;	}
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {transform: translateY(0%);}
.top_btn{
display: none;
}
.hosoku{
font-size: 85%;
width: 95%;
}
/*info_table*/
table.table01 {
width: 95%;
font-size: 85%;
}
table.table01 thead th {
padding:5px;
}
table.table01 tbody td {
padding: 5px;
}
}
@media screen and (max-width: 600px) {
table.table01 {
width: 98%;
font-size: 80%;
}
table.table01 thead th {
padding:3px;
}
table.table01 tbody td {
padding: 3px;
}
#pagetop{
position:fixed;
right: -550px;
cursor:pointer;
}
nav.globalMenuSp ul li {
width: 100px;
height: 100px;
}
.top_logo{
width: 27%;
padding-left: 5px;
}
table.table02{
margin: 0px;
}
.modal_system {
width: 90%;
overflow-y: scroll;
height: 500px;
}
}