@charset "utf-8";

/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#fff;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:100%;
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:500px;
}


body {
	background-color:#FFF;
	color:#000;
}

body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


#pagetop {
	margin:0px;
	padding:0px;
	width:0px;
	height:0px;
}


@media (min-width: 45rem) {
#content {
    display:flex;
    flex-wrap:wrap;
}
#content-inner {
    clear: both;
}
#side {
    width: 30%;
    float: left;
    background: #143992;
}
main {
    width: 70%;
    float: right;
}
header {
	background:#FFF;
	padding:10px 5px;}
}


/*-----------------------header---------------------------*/

#crnav {
	position: relative;
}
#crnav-head {
	position:fixed;
	top:0px;
	right:0px;
	z-index:102;
	background-color:#E60013;
	padding:10px;
	height:85px;
}
#crnav-head .menu-trigger,
#crnav-head .menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
#crnav-head .menu-trigger {
  position: relative;
  width: 50px;
  height: 44px;
  background: none;
  border: none;
  appearance: none;
  cursor: pointer;
}
#crnav-head .menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
}
#crnav-head .menu-trigger span:nth-of-type(1) {
  top: 0;
}
#crnav-head .menu-trigger span:nth-of-type(2) {
  top: 20px;
}
#crnav-head .menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
#crnav-head .menu-trigger::after {
  position: absolute;
  left: 0;
  bottom: -30px;
  content: 'MENU';
  display: block;
  width: 100%;
  color: #FFF;
  font-size: 16px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: all .4s;
}
#crnav-head .menu-trigger.active::after {
  content: 'CLOSE';
  bottom: -25px;
}
#crnav-head .menu-trigger.active span:nth-of-type(1) {
  transform: translateY(20px) rotate(-45deg);
}
#crnav-head .menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
#crnav-head .menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-20px) rotate(45deg);
}
#crnav-body {
	position:fixed;
	top:85px;
	z-index:103;
	background-color:#009944;
	width:100%;
	padding:30px;
	display:none;
}
#crnav-body ul {
	list-style-type: none;
}
#crnav-body ul li {
	font-size:18px;
	color:#FFF;
}
#crnav-body ul li ul {
	list-style:disc;
	margin-left:20px;
	padding-left:10px;
	}
#crnav-body ul li ul li {
	font-size:16px;
}
#crnav-body ul li ul li.crna_shop_line {
	border-bottom:none;
}
#crnav-body ul li a {
	color:#000;
	line-height: 200%;
	text-decoration: none;
	color:#FFF;
	display:block;
	width:100%;
}
#crnav-body ul li a span {
	background-color:#FFF;
	padding:0px 10px;
	border-radius:5px;
	font-size:18px;
	margin: 10px;
	display:inline-block;
	color:#C00;
	font-weight:bold;
	}
#crnav-body ul li.instagram_link {
	padding-top:5px;}
#crnav-body ul li.instagram_link a {
	max-width:60px;
}
#side .header_menu {
	display:none;}
header #logo {
	margin:10px;}
header #logo .logo_mark {
	width:15%;
	margin-right:7px;
	display:inline-block;}
header #logo .logo {
	width:60%;
	display:inline-block;}



@media (min-width: 45rem) {
#crnav {
	display:none;
}
#side {}
#side .header_menu {
	display:block;}
header {
	text-align:center;
	padding:10px 0px 40px 0px;}
header #logo {
	margin:10px;
	text-align:center;}
header #logo .logo_mark {
	width:50%;
	margin:0px auto;
	display:block;}
header #logo .logo {
	width:90%;
	display:block;
	margin:0px auto;
}
header .header_menu ul {
	display:inline-block;
	list-style: none;
	}
header .header_menu ul li {
	color:#E50013;
	font-weight:bold;
	font-size:20px;
	text-align: left;
	line-height: 30px;
	padding-bottom:10px;
}

header .header_menu ul li img {
	vertical-align:middle;}
header .header_menu ul li a {
	color:#E50013;}
header .header_menu ul li.header_instagram_link {
	text-align:center;}
header .header_menu ul li.header_instagram_link img {
	max-width:75px;}
}
 @media (min-width: 60rem) {
}
/*-----------------------header---------------------------*/


/*------------------------nav-----------------------------*/

#side .main_nav {
	display:none;}
	
@media (min-width: 45rem) {
#side .main_nav {
	display:block;}
	
#side nav.main_nav {
	background-color:#009944;
	color:#FFF;
	padding:15px 15px 30px 15px;
    postion: -webkit-sticky;
    position: sticky;
    top: 0;	}
/*JSを使いfixedクラスが付与された際の設定*/
#side nav#main_nav.fixed{
	position: fixed;/*fixedを設定して固定*/
  z-index: 999;/*最前面へ*/
  top:0;/*位置指定*/
  left:0;/*位置指定*/
}
#side nav.main_nav ul li {
	border-bottom:#FFF 2px dotted;
	list-style:none;
	padding:10px;
	font-size:20px;}
#side nav.main_nav ul li a {
	color:#FFF;}
#side nav.main_nav ul li.nav_s {
	border:none;
	font-size:16px;
	padding:5px 10px 0px 10px;}	
#side nav.main_nav ul li a span {
	background-color:#FFF;
	padding:3px;
	border-radius:5px;
	font-size:14px;
	margin:0px 5px;
	display:inline-block;
	color:#C00;
	font-weight:bold;
	}
#side nav.main_nav ul li ul li {
	list-style:disc;
	font-size:18px;
	border-bottom:none;
	padding:0px;
	margin-left:20px;}
	
}

/*------------------------nav-----------------------------*/




/*-----------------------amin---------------------------*/

main {
	clear:both;}

main .main_header {
	font-size:0px;}

main .main_header h2 {
	font-size:24px;
	font-weight:normal;
	background:#143992;
	color:#FFF;
	text-align:center;
	padding:20px 5px;
	margin:0px;
	}


 @media (min-width: 45rem) {
}


.anime_up {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.anime_up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}


/*-------------------page_top_link------------------------*/


#page_top_link {
	position:fixed; /*固定*/
	bottom:10px;
	right:0px;
	z-index:200;
}

#page_top_link {
  border-radius: 50%;
  background: #009944;
  padding:20px;
  }
#page_top_link a {
	line-height:130%;
	color:#FFF;
	display:block;}

/*-------------------/page_top_link------------------------*/


/*-----------------------footer---------------------------*/

footer {
	background-color:#E60013;
	clear:both;
	color:#FFF;
	padding:30px 10px;

}
#footer .footer_logo_mark {
	width:80px;
	display:inline-block;}
#footer .footer_logo {
	width:250px;
	display:inline-block;
	}
#footer .footer_nav ul li {
	display:inline-block;
	list-style:none;
	margin: 0px 20px 0px 0px;}
#footer .footer_nav ul li a {
	color:#FFF;
	}

 @media (min-width: 45rem) {
footer .footer_contents {
	text-align:center;}
#footer .footer_logo_mark {
	display:block;
	margin:auto;}
#footer .footer_logo {
	display:block;
	text-align:center;
	margin:auto;
	}
footer .footer_contents .address_tel {
	text-align:left;
	display: inline-block;
	}

	}
/*-----------------------footer---------------------------*/






.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

.clearfix:before {
　　　　content: "";
	display: block;
	clear: both;
}

.clearfix {
	display: block;
}